<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MIM-commom的使用说明</title>
    <link rel="stylesheet" href="./css/mim-common.css" type="text/css">
    <link rel="stylesheet" href="./css/mim-ui.css" type="text/css">
    <link rel="stylesheet" href="./css/iconfont.css" type="text/css">
</head>
<body>
<mim-container>
    <mim-header class="mim-header"><h3>MIM-commom</h3>
        <!--<p class="currentRightTime">-->
        <!--当前时间：<span class="currentTime"></span></p>-->
        <mim-select style="color: #000000;float: right;margin-top: 10px" bool="false" class="selects"></mim-select>
    </mim-header>
    <mim-aside class="mim-aside">
        <aside style="width: 200px" class="aside">
            <mim-menu default-active="homePage"
                      background-color="#324057"
                      text-color="#ffffff"
                      hover-bgColor="rgba(30,47,76,.92)"
                      hover-textColor="#ffffff">
                <ul style="margin-bottom: 60px">
                    <li>
                        <div class="mim-menu">
                            <i class="iconfont">&#xe62e;</i>
                            <span index="homePage">首页</span>
                        </div>
                    </li>
                    <li>
                        <div class="mim-menu">
                            <i class="iconfont">&#xe6ac;</i>
                            <span index="handQuickly">快速上手</span>
                        </div>
                    </li>
                    <li>
                        <div class="mim-menu">
                            <i class="iconfont">&#xe625;</i>
                            <span>最新压缩代码</span>
                            <i class="iconfont icon-copy-down" bool="false">&#xe668;</i>
                        </div>
                        <ul class="second-mim-menu">
                            <li class="mim-menu-item">
                                <span index="newCss">最新压缩css</span>
                            </li>
                            <li class="mim-menu-item">
                                <span index="newJs">最新压缩js</span>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <div class="mim-menu">
                            <i class="iconfont">&#xe617;</i>
                            <span>组件信息</span>
                            <i class="iconfont icon-copy-down" bool="false">&#xe668;</i>
                        </div>
                        <ul class="second-mim-menu">
                            <li class="mim-menu-item">
                                <span index="layout">Layout 布局</span>
                            </li>
                            <li class="mim-menu-item">
                                <span index="container">Container 布局</span>
                            </li>
                            <li class="mim-menu-item">
                                <span index="buttonSwitch">Button 按钮</span>
                            </li>
                            <li class="mim-menu-item">
                                <span index="inputBox">Input 输入框</span>
                            </li>
                            <li class="mim-menu-item">
                                <span index="navSide">NavSide导航侧栏</span>
                            </li>
                            <li class="mim-menu-item">
                                <span index="mimLoading">Loading 加载</span>
                            </li>
                            <li class="mim-menu-item">
                                <span index="mimTable">Table 表格</span>
                            </li>
                            <li class="mim-menu-item">
                                <span index="mimSelect">Select 下拉框</span>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <div class="mim-menu">
                            <i class="iconfont">&#xe651;</i>
                            <span>js功能</span>
                            <i class="iconfont icon-copy-down" bool="false">&#xe668;</i>
                        </div>
                        <ul class="second-mim-menu">
                            <li class="mim-menu-item">
                                <span index="alertSide">Alert 提示框</span>
                            </li>
                            <li class="mim-menu-item">
                                <span index="confirmPop">Confirm 弹窗</span>
                            </li>
                            <li class="mim-menu-item">
                                <span index="verificationDown">验证码倒计时</span>
                            </li>
                            <li class="mim-menu-item">
                                <span index="timeFormatting">时间格式化</span>
                            </li>
                            <li class="mim-menu-item">
                                <span index="likeResultStyle">点赞样式</span>
                            </li>
                            <li class="mim-menu-item">
                                <span index="customStyle">自定义验证</span>
                            </li>
                            <li class="mim-menu-item">
                                <span index="returnTop">返回顶部</span>
                            </li>
                            <li class="mim-menu-item disabled">
                                <span index="easyDrag">简易拖拽</span>
                            </li>
                            <li class="mim-menu-item">
                                <span index="easyAjax">简易AJAX封装</span>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <div class="mim-menu">
                            <i class="iconfont">&#xe66b;</i>
                            <span index="versionUpdating">版本更新日志</span>
                        </div>
                    </li>
                </ul>
            </mim-menu>
        </aside>
        <mim-main class="mim-main">
            <!--首页-->
            <div class="homePage detailsDiv">
                <div class="homePageDiv">
                    <h1>欢迎使用 MIM-common</h1>
                    <p style="margin-top: 20px">基于jq的UI框架及方法</p>
                    <p style="margin-top: 200px">author:&nbsp;&nbsp;王富贵</p>
                </div>
                <div class="version">版本号:&nbsp;&nbsp;V<span class="versionNumber"></span></div>

            </div>
            <!--快速上手-->
            <div class="handQuickly detailsDiv">
                <mim-container>
                    <mim-header style="text-align: center"><h2>快速上手</h2></mim-header>
                    <mim-main>
                        <div class="vesselDiv">
                            <h3>快速上手</h3>
                            <p>本节将介绍如何在项目中使用 MIM-common。</p>
                            <h3>下载并引入最新css</h3>
                            <p>
                                <mim-button type="success" class="linkCss_download" style="margin-top: 20px">
                                    点击跳转到最新css
                                </mim-button>
                            </p>
                            <h3>下载并引入最新js</h3>
                            <p>
                                <mim-button type="success" class="linkjs_download" style="margin-top: 20px">点击跳转到最新js
                                </mim-button>
                            </p>
                            <h3>Icon 图标</h3>
                            <p>本框架内置图标为阿里矢量图，需要添加新图标请联系作者</p>
                            <p>当前内置图标：</p>
                            <div class="icon_div" style="width: 50%">
                                <i class="iconfont">&#xe6ac;</i>
                                <i class="iconfont">&#xe626;</i>
                                <i class="iconfont">&#xe617;</i>
                                <i class="iconfont">&#xe651;</i>
                                <i class="iconfont">&#xe625;</i>
                                <i class="iconfont">&#xe62e;</i>
                                <i class="iconfont">&#xe624;</i>
                                <i class="iconfont">&#xe621;</i>
                                <i class="iconfont">&#xe605;</i>
                                <i class="iconfont">&#xe66b;</i>
                                <i class="iconfont">&#xe668;</i>
                                <i class="iconfont">&#xe669;</i>
                                <i class="iconfont">&#xe614;</i>
                                <i class="iconfont">&#xe640;</i>
                                <i class="iconfont">&#xe643;</i>
                                <i class="iconfont">&#xe60a;</i>
                                <i class="iconfont">&#xe70e;</i>
                                <i class="iconfont">&#xe63b;</i>
                                <i class="iconfont">&#xe613;</i>
                                <i class="iconfont">&#xe635;</i>
                                <i class="iconfont">&#xe61b;</i>
                                <i class="iconfont">&#xe606;</i>
                                <i class="iconfont">&#xe699;</i>
                                <i class="iconfont">&#xe687;</i>
                            </div>

                        </div>
                    </mim-main>
                </mim-container>
            </div>
            <!--最新css-->
            <div class="newCss detailsDiv">
                <mim-row>
                    <mim-col span="12" style="text-align: center"><h2>最新压缩css</h2></mim-col>
                </mim-row>
                <br>
                <textarea readonly id="cssText"></textarea>
                <br>
                <mim-row>
                    <mim-col span="12" style="text-align: center">
                        <mim-button type="primary" class="copyCss" style="margin:20px 10px 0 0">复制压缩css</mim-button>
                        <mim-button type="success" class="linkCss" style="margin-top: 20px">点击跳转到源代码</mim-button>
                    </mim-col>
                </mim-row>

            </div>
            <!--最新js-->
            <div class="newJs detailsDiv">
                <mim-row>
                    <mim-col span="12" style="text-align: center"><h2>最新压缩js</h2></mim-col>
                </mim-row>
                <br>
                <textarea readonly id="jsText"></textarea>
                <br>
                <mim-row>
                    <mim-col span="12" style="text-align: center">
                        <mim-button type="primary" class="copyjs" style="margin:20px 10px 0 0">复制压缩js</mim-button>
                        <mim-button type="success" class="linkjs" style="margin-top: 20px">点击跳转到源代码</mim-button>
                    </mim-col>
                </mim-row>
            </div>
            <!--layout布局-->
            <div class="layout detailsDiv">
                <mim-container>
                    <mim-header style="text-align: center"><h2>Layout布局</h2></mim-header>
                    <mim-main>
                        <div class="vesselDiv">
                            <h3>Layout布局</h3>
                            <p>通过基础的 24 分栏，迅速简便地创建布局。</p>
                            <h3>基础布局</h3>
                            <p>使用单一分栏创建基础的栅格布局。</p>
                            <mim-row style="margin-top: 30px;text-align: center;line-height: 36px">
                                <mim-col span="12" style="background: #ffffff">
                                    <mim-row style="padding: 30px 15px 15px 15px">
                                        <mim-col span="24" style="background: #99a9bf">1</mim-col>
                                    </mim-row>
                                    <mim-row style="padding: 15px">
                                        <mim-col span="12" style="background: #d3dce6">2</mim-col>
                                        <mim-col span="12" style="background: #e5e9f5">2</mim-col>
                                    </mim-row>
                                    <mim-row style="padding: 15px">
                                        <mim-col span="8" style="background: #d3dce6">3</mim-col>
                                        <mim-col span="8" style="background: #e5e9f5">3</mim-col>
                                        <mim-col span="8" style="background: #d3dce6">3</mim-col>
                                    </mim-row>
                                    <mim-row style="padding: 15px">
                                        <mim-col span="6" style="background: #d3dce6">4</mim-col>
                                        <mim-col span="6" style="background: #e5e9f5">4</mim-col>
                                        <mim-col span="6" style="background: #d3dce6">4</mim-col>
                                        <mim-col span="6" style="background: #e5e9f5">4</mim-col>
                                    </mim-row>
                                    <mim-row style="padding: 15px">
                                        <mim-col span="4" style="background: #d3dce6">5</mim-col>
                                        <mim-col span="4" style="background: #e5e9f5">5</mim-col>
                                        <mim-col span="4" style="background: #d3dce6">5</mim-col>
                                        <mim-col span="4" style="background: #e5e9f5">5</mim-col>
                                        <mim-col span="4" style="background: #d3dce6">5</mim-col>
                                        <mim-col span="4" style="background: #e5e9f5">5</mim-col>
                                    </mim-row>
                                    <p style="margin-top: 30px;background: #fafafa">通过 row 和 col 组件，并通过 col 组件的 <span
                                            style="background: #e5e9f5">span</span> 属性我们就可以自由地组合布局。</p>
                                    <p style="text-align: center;margin: 20px 0 25px 0">
                                        <mim-button type="primary" id="layoutBasicsShow">显示代码</mim-button>
                                    </p>
                                </mim-col>
                                <mim-col span="12">
                            <textarea id="layoutBasics" disabled readonly>

                            基础布局代码展示：

                             1. <mim-row>
                                    <mim-col span="24"></mim-col>
                                </mim-row>

                             2.  <mim-row>
                                    <mim-col span="12"></mim-col>
                                    <mim-col span="12"></mim-col>
                                </mim-row>

                             3. <mim-row>
                                    <mim-col span="8"></mim-col>
                                    <mim-col span="8"></mim-col>
                                    <mim-col span="8"></mim-col>
                                </mim-row>

                             4. <mim-row>
                                    <mim-col span="6"></mim-col>
                                    <mim-col span="6"></mim-col>
                                    <mim-col span="6"></mim-col>
                                    <mim-col span="6"></mim-col>
                                </mim-row>

                             5.   <mim-row>
                                    <mim-col span="4"></mim-col>
                                    <mim-col span="4"></mim-col>
                                    <mim-col span="4"></mim-col>
                                    <mim-col span="4"></mim-col>
                                    <mim-col span="4"></mim-col>
                                    <mim-col span="4"></mim-col>
                                </mim-row>
                            </textarea>

                                </mim-col>
                            </mim-row>
                            <h3>分栏间隔</h3>
                            <p>分栏之间存在间隔。</p>
                            <mim-row style="margin-top: 30px;text-align: center;line-height: 36px;">
                                <mim-col span="12" style="background: #ffffff">
                                    <mim-row gutter="20" style="padding: 30px 15px 15px 15px">
                                        <mim-col span="6" style="background: #d3dce6"></mim-col>
                                        <mim-col span="6" style="background: #d3dce6"></mim-col>
                                        <mim-col span="6" style="background: #d3dce6"></mim-col>
                                        <mim-col span="6" style="background: #d3dce6"></mim-col>
                                    </mim-row>
                                    <p style="margin-top: 30px;background: #fafafa">Row 组件 提供 <span
                                            style="background: #e5e9f5">gutter</span> 属性来指定每一栏之间的间隔，默认间隔为 0。</p>
                                    <p style="text-align: center;margin: 20px 0 25px 0">
                                        <mim-button type="primary" id="layoutIntervalShow">显示代码</mim-button>
                                    </p>
                                </mim-col>
                                <mim-col span="12">
                             <textarea id="layoutInterval" disabled readonly>

                            分栏间隔代码展示：

                             <mim-row gutter="20">
                                <mim-col span="6"></mim-col>
                                <mim-col span="6"></mim-col>
                                <mim-col span="6"></mim-col>
                                <mim-col span="6"></mim-col>
                             </mim-row>

                            </textarea>
                                </mim-col>
                            </mim-row>
                            <h3>混合布局</h3>
                            <p>通过基础的 1/24 分栏任意扩展组合形成较为复杂的混合布局。</p>
                            <mim-row style="margin-top: 30px;text-align: center;line-height: 36px;">
                                <mim-col span="12" style="background: #ffffff">
                                    <mim-row gutter="20" style="padding: 30px 15px 15px 15px">
                                        <mim-col span="16" style="background: #d3dce6"></mim-col>
                                        <mim-col span="8" style="background: #d3dce6"></mim-col>
                                    </mim-row>
                                    <mim-row gutter="20" style="padding:15px">
                                        <mim-col span="8" style="background: #d3dce6"></mim-col>
                                        <mim-col span="8" style="background: #d3dce6"></mim-col>
                                        <mim-col span="4" style="background: #d3dce6"></mim-col>
                                        <mim-col span="4" style="background: #d3dce6"></mim-col>
                                    </mim-row>
                                    <mim-row gutter="20" style="padding:15px">
                                        <mim-col span="4" style="background: #d3dce6"></mim-col>
                                        <mim-col span="16" style="background: #d3dce6"></mim-col>
                                        <mim-col span="4" style="background: #d3dce6"></mim-col>
                                    </mim-row>
                                    <p style="text-align: center;margin: 20px 0 25px 0">
                                        <mim-button type="primary" id="layoutMixtureShow">显示代码</mim-button>
                                    </p>
                                </mim-col>
                                <mim-col span="12">
                             <textarea id="layoutMixture" disabled readonly>

                             混合布局代码展示：

                             <mim-row gutter="20">
                                <mim-col span="16"></mim-col>
                                <mim-col span="8"></mim-col>
                             </mim-row>

                             <mim-row gutter="20">
                                <mim-col span="8"></mim-col>
                                <mim-col span="8"></mim-col>
                                <mim-col span="4"></mim-col>
                                <mim-col span="4"></mim-col>
                             </mim-row>

                             <mim-row gutter="20">
                                <mim-col span="4"></mim-col>
                                <mim-col span="16"></mim-col>
                                <mim-col span="4"></mim-col>
                             </mim-row>

                            </textarea>
                                </mim-col>
                            </mim-row>
                            <h3>分栏偏移</h3>
                            <p>支持偏移指定的栏数。</p>
                            <mim-row style="margin-top: 30px;text-align: center;line-height: 36px">
                                <mim-col span="12" style="background: #ffffff">
                                    <mim-row style="padding: 30px 15px 15px 15px">
                                        <mim-col span="6" style="background: #d3dce6"></mim-col>
                                        <mim-col span="6" offset="6" style="background: #d3dce6"></mim-col>
                                    </mim-row>
                                    <mim-row style="padding:15px">
                                        <mim-col span="6" offset="6" style="background: #d3dce6"></mim-col>
                                        <mim-col span="6" offset="6" style="background: #d3dce6"></mim-col>
                                    </mim-row>
                                    <mim-row style="padding:15px">
                                        <mim-col span="12" offset="6" style="background: #d3dce6"></mim-col>
                                    </mim-row>
                                    <p style="margin-top: 30px;background: #fafafa">通过制定 col 组件的 <span
                                            style="background: #e5e9f5">offset</span> 属性可以指定分栏偏移的栏数。（且row上gutter不能存在）
                                    </p>
                                    <p style="text-align: center;margin: 20px 0 25px 0">
                                        <mim-button type="primary" id="layoutOffsetShow">显示代码</mim-button>
                                    </p>
                                </mim-col>
                                <mim-col span="12">
                             <textarea id="layoutOffset" disabled readonly>

                             分栏偏移代码展示：

                             <mim-row>
                                <mim-col span="6"></mim-col>
                                <mim-col span="6" offset="6"></mim-col>
                             </mim-row>

                             <mim-row gutter="20">
                               <mim-col span="6" offset="6"></mim-col>
                                <mim-col span="6" offset="6"></mim-col>
                             </mim-row>

                             <mim-row gutter="20">
                                <mim-col span="12" offset="6"></mim-col>
                             </mim-row>

                            </textarea>
                                </mim-col>
                            </mim-row>

                            <h3>参数说明</h3>
                            <mim-row style="margin-top: 30px;text-align: center;line-height: 36px">
                                <mim-col span="12" style="background: #ffffff;padding: 20px">
                                    <mim-table style="width: 100%;" stripe="true">
                                        <table class="mim-table mim-table-header-wrapper">
                                            <tr>
                                                <th class="is-leaf" width="100">
                                                    <div class="cell">参数</div>
                                                </th>
                                                <th class="is-leaf" width="150">
                                                    <div class="cell">说明</div>
                                                </th>
                                                <th class="is-leaf" width="100">
                                                    <div class="cell">类型</div>
                                                </th>
                                                <th class="is-leaf" width="180">
                                                    <div class="cell">可选值</div>
                                                </th>
                                                <th class="is-leaf" width="100">
                                                    <div class="cell">默认值</div>
                                                </th>
                                            </tr>
                                        </table>
                                        <table class="mim-table mim-table-body-wrapper">
                                            <tr>
                                                <td class="is-leaf" width="100">
                                                    <div class="cell">gutter</div>
                                                </td>
                                                <td class="is-leaf" width="150">
                                                    <div class="cell">栅格间隔</div>
                                                </td>
                                                <td class="is-leaf" width="100">
                                                    <div class="cell">number</div>
                                                </td>
                                                <td class="is-leaf" width="180">
                                                    <div class="cell">——</div>
                                                </td>
                                                <td class="is-leaf" width="100">
                                                    <div class="cell">0</div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="is-leaf" width="100">
                                                    <div class="cell">span</div>
                                                </td>
                                                <td class="is-leaf" width="150">
                                                    <div class="cell">栅格占据的列数</div>
                                                </td>
                                                <td class="is-leaf" width="100">
                                                    <div class="cell">number</div>
                                                </td>
                                                <td class="is-leaf" width="180">
                                                    <div class="cell">——</div>
                                                </td>
                                                <td class="is-leaf" width="100">
                                                    <div class="cell">24</div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="is-leaf" width="100">
                                                    <div class="cell">offset</div>
                                                </td>
                                                <td class="is-leaf" width="150">
                                                    <div class="cell">栅格左侧的间隔格数</div>
                                                </td>
                                                <td class="is-leaf" width="100">
                                                    <div class="cell">number</div>
                                                </td>
                                                <td class="is-leaf" width="180">
                                                    <div class="cell">——</div>
                                                </td>
                                                <td class="is-leaf" width="100">
                                                    <div class="cell">0</div>
                                                </td>
                                            </tr>
                                        </table>
                                    </mim-table>
                                </mim-col>
                            </mim-row>

                            <div class="upward"><i class="iconfont">&#xe626;</i></div>
                        </div>
                    </mim-main>
                    <mim-footer class="mim-footer">
                        <!--<p class="previousPage"><i class="iconfont">&#xe668;</i><span style="margin-left: 40px">上一页</span></p>-->
                        <p class="nextPage"><i class="iconfont">&#xe668;</i><span style="margin-right: 40px"
                                                                                  index="container">Container 布局</span>
                        </p>
                    </mim-footer>
                </mim-container>
            </div>
            <!--container布局容器-->
            <div class="container detailsDiv">
                <mim-container>
                    <mim-header style="text-align: center"><h2>Container 布局</h2></mim-header>
                    <mim-main>
                        <div class="vesselDiv">
                            <h3>Container 布局</h3>
                            <p>用于布局的容器组件，方便快速搭建页面的基本结构：</p>
                            <p> mim-container ：外层容器。</p>
                            <p> mim-header ：顶栏容器。</p>
                            <p> mim-aside ：侧边栏容器。</p>
                            <p> mim-main ：主要区域容器。</p>
                            <p> mim-footer ：底栏容器。</p>
                            <p style="background: #ecf8ff;font-size: 16px">以上组件采用了 flex
                                布局，使用前请确定目标浏览器是否兼容。此外，mim-containe 的子元素只能是后四者，后四者的父元素也只能是 mim-container 。</p>
                            <h3>常见页面布局</h3>
                            <mim-row style="margin-top: 30px;text-align: center;line-height: 36px;">
                                <mim-col span="12" style="background: #ffffff">
                                    <mim-container style="padding: 20px">
                                        <mim-header style="background: #b3c0d1">Header</mim-header>
                                        <mim-main style="background: #e9eef3">Main</mim-main>
                                        <mim-footer style="background: #b3c0d1">Footer</mim-footer>
                                    </mim-container>

                                    <mim-container style="padding: 20px">
                                        <mim-header style="background: #b3c0d1">Header</mim-header>
                                        <mim-aside style="background: #d3dce6">
                                            <aside style="width: 200px">aside</aside>
                                            <mim-main style="background: #e9eef3">Main</mim-main>
                                        </mim-aside>
                                        <mim-footer style="background: #b3c0d1">Footer</mim-footer>
                                    </mim-container>

                                    <p style="text-align: center;margin: 0px 0 25px 0">
                                        <mim-button type="primary" id="containerBasicsShow">显示代码</mim-button>
                                    </p>
                                </mim-col>
                                <mim-col span="12">
                                <textarea id="containerBasics" disabled readonly>

                                   1.<mim-container>
                                        <mim-header>Header</mim-header>
                                        <mim-main>Main</mim-main>
                                        <mim-footer>Footer</mim-footer>
                                    </mim-container>

                                   2.<mim-container>
                                        <mim-header>Header</mim-header>
                                        <mim-aside>
                                            <aside>aside</aside>
                                            <mim-main>Main</mim-main>
                                        </mim-aside>
                                        <mim-footer>Footer</mim-footer>
                                    </mim-container>
                                </textarea>

                                </mim-col>
                            </mim-row>
                            <div class="upward"><i class="iconfont">&#xe626;</i></div>
                        </div>
                    </mim-main>
                    <mim-footer class="mim-footer">
                        <p class="previousPage"><i class="iconfont">&#xe668;</i><span style="margin-left: 40px"
                                                                                      index="layout">Layout 布局</span>
                        </p>
                        <p class="nextPage"><i class="iconfont">&#xe668;</i><span style="margin-right: 40px"
                                                                                  index="buttonSwitch">Button 按钮</span>
                        </p>
                    </mim-footer>
                </mim-container>
            </div>
            <!--button按钮-->
            <div class="buttonSwitch detailsDiv">
                <mim-container>
                    <mim-header style="text-align: center"><h2>Button按钮</h2></mim-header>
                    <mim-main>
                        <div class="vesselDiv">
                            <h3>Button按钮</h3>
                            <p>常用的操作按钮。</p>
                            <h3>基础用法</h3>
                            <p>基础的按钮用法。</p>
                            <mim-row style="margin-top: 30px;text-align: center;line-height: 36px;">
                                <mim-col span="12" style="background: #ffffff">
                                    <div style="padding: 20px" class="basisButton">
                                        <mim-button type="default">普通按钮</mim-button>
                                        <mim-button type="primary">主要按钮</mim-button>
                                        <mim-button type="success">成功按钮</mim-button>
                                        <mim-button type="info">信息按钮</mim-button>
                                        <mim-button type="warning">警告按钮</mim-button>
                                        <mim-button type="danger">危险按钮</mim-button>
                                    </div>
                                    <div class="basisButton">
                                        <mim-button type="default" plain>普通按钮</mim-button>
                                        <mim-button type="primary" plain>主要按钮</mim-button>
                                        <mim-button type="success" plain>成功按钮</mim-button>
                                        <mim-button type="info" plain>信息按钮</mim-button>
                                        <mim-button type="warning" plain>警告按钮</mim-button>
                                        <mim-button type="danger" plain>危险按钮</mim-button>
                                    </div>
                                    <div style="padding: 20px 0" class="basisButton">
                                        <mim-button type="default" round style="margin-left: 20px"> 普通按钮</mim-button>
                                        <mim-button type="primary" round>主要按钮</mim-button>
                                        <mim-button type="success" round>成功按钮</mim-button>
                                        <mim-button type="info" round>信息按钮</mim-button>
                                        <mim-button type="warning" round>警告按钮</mim-button>
                                        <mim-button type="danger" round>危险按钮</mim-button>
                                    </div>
                                    <p style="margin-top: 30px;background: #fafafa">使用<span style="background: #e5e9f5">type</span>、<span
                                            style="background: #e5e9f5">plain</span>、和<span style="background: #e5e9f5">round</span>属性来定义
                                        Button 的样式。 </p>
                                    <p style="text-align: center;margin: 20px 0 25px 0">
                                        <mim-button type="primary" id="buttonBasicsShow">显示代码</mim-button>
                                    </p>
                                </mim-col>
                                <mim-col span="12">
                                <textarea id="buttonBasics" disabled readonly>

                                        <mim-button type="default">普通按钮</mim-button>
                                        <mim-button type="primary">主要按钮</mim-button>
                                        <mim-button type="success">成功按钮</mim-button>
                                        <mim-button type="info">信息按钮</mim-button>
                                        <mim-button type="warning">警告按钮</mim-button>
                                        <mim-button type="danger">危险按钮</mim-button>

                                        <mim-button type="default" plain>普通按钮</mim-button>
                                        <mim-button type="primary" plain>主要按钮</mim-button>
                                        <mim-button type="success" plain>成功按钮</mim-button>
                                        <mim-button type="info" plain>信息按钮</mim-button>
                                        <mim-button type="warning" plain>警告按钮</mim-button>
                                        <mim-button type="danger" plain>危险按钮</mim-button>

                                        <mim-button type="default" round> 普通按钮</mim-button>
                                        <mim-button type="primary" round>主要按钮</mim-button>
                                        <mim-button type="success" round>成功按钮</mim-button>
                                        <mim-button type="info" round>信息按钮</mim-button>
                                        <mim-button type="warning" round>警告按钮</mim-button>
                                        <mim-button type="danger" round>危险按钮</mim-button>

                                </textarea>
                                </mim-col>
                            </mim-row>

                            <h3>禁用状态</h3>
                            <p>按钮不可用状态。</p>
                            <mim-row style="margin-top: 30px;text-align: center;line-height: 36px;">
                                <mim-col span="12" style="background: #ffffff">
                                    <div style="padding: 20px" class="basisButton">
                                        <mim-button type="default" disabled>普通按钮</mim-button>
                                        <mim-button type="primary" disabled>主要按钮</mim-button>
                                        <mim-button type="success" disabled>成功按钮</mim-button>
                                        <mim-button type="info" disabled>信息按钮</mim-button>
                                        <mim-button type="warning" disabled>警告按钮</mim-button>
                                        <mim-button type="danger" disabled>危险按钮</mim-button>
                                    </div>
                                    <div class="basisButton">
                                        <mim-button type="default" plain disabled>普通按钮</mim-button>
                                        <mim-button type="primary" plain disabled>主要按钮</mim-button>
                                        <mim-button type="success" plain disabled>成功按钮</mim-button>
                                        <mim-button type="info" plain disabled>信息按钮</mim-button>
                                        <mim-button type="warning" plain disabled>警告按钮</mim-button>
                                        <mim-button type="danger" plain disabled>危险按钮</mim-button>
                                    </div>
                                    <p style="margin-top: 30px;background: #fafafa">你可以使用<span
                                            style="background: #e5e9f5">disabled</span>属性来定义按钮是否可用</p>
                                    <p style="text-align: center;margin: 20px 0 25px 0">
                                        <mim-button type="primary" id="buttonForbiddenShow">显示代码</mim-button>
                                    </p>
                                </mim-col>
                                <mim-col span="12">
                                <textarea id="buttonForbidden" disabled readonly>

                                        <mim-button type="default" disabled>普通按钮</mim-button>
                                        <mim-button type="primary" disabled>主要按钮</mim-button>
                                        <mim-button type="success" disabled>成功按钮</mim-button>
                                        <mim-button type="info" disabled>信息按钮</mim-button>
                                        <mim-button type="warning" disabled>警告按钮</mim-button>
                                        <mim-button type="danger" disabled>危险按钮</mim-button>

                                        <mim-button type="default" plain disabled>普通按钮</mim-button>
                                        <mim-button type="primary" plain disabled>主要按钮</mim-button>
                                        <mim-button type="success" plain disabled>成功按钮</mim-button>
                                        <mim-button type="info" plain disabled>信息按钮</mim-button>
                                        <mim-button type="warning" plain disabled>警告按钮</mim-button>
                                        <mim-button type="danger" plain disabled>危险按钮</mim-button>

                                </textarea>
                                </mim-col>
                            </mim-row>

                            <h3>文字按钮</h3>
                            <p>没有边框和背景色的按钮。</p>
                            <mim-row style="margin-top: 30px;text-align: center;line-height: 36px;">
                                <mim-col span="12" style="background: #ffffff">
                                    <div style="padding: 20px" class="basisButton">
                                        <mim-button type="text">文字按钮</mim-button>
                                        <mim-button type="text" disabled>文字按钮</mim-button>
                                    </div>
                                    <p style="margin-top: 30px;background: #fafafa">你可以定义type为<span
                                            style="background: #e5e9f5">text</span>来定义按钮为文字按钮</p>
                                    <p style="text-align: center;margin: 20px 0 25px 0">
                                        <mim-button type="primary" id="buttonTextShow">显示代码</mim-button>
                                    </p>
                                </mim-col>
                                <mim-col span="12">
                                <textarea id="buttonText" disabled readonly>

                                    <mim-button type="text">文字按钮</mim-button>
                                    <mim-button type="text" disabled>文字按钮</mim-button>

                                </textarea>
                                </mim-col>
                            </mim-row>

                            <h3>图标按钮</h3>
                            <p>带图标的按钮可增强辨识度（有文字）或节省空间（无文字）。</p>
                            <mim-row style="margin-top: 30px;text-align: center;line-height: 36px;">
                                <mim-col span="12" style="background: #ffffff">
                                    <div style="padding: 20px" class="basisButton">
                                        <mim-button type="primary"><i class='iconfont onlyIconfont'>&#xe60a;</i>
                                        </mim-button>
                                        <mim-button type="primary"><i class='iconfont'>&#xe60a;</i>搜&nbsp;索</mim-button>
                                        <mim-button type="primary"><i class='iconfont iconfontRight'>&#xe605;</i>设&nbsp;置
                                        </mim-button>
                                    </div>
                                    <p style="margin-top: 30px;background: #fafafa">
                                        设置icon属性即可,默认icon在左侧，onlyIconfont仅仅只有icon，iconfontRight icon在右侧</p>
                                    <p style="text-align: center;margin: 20px 0 25px 0">
                                        <mim-button type="primary" id="buttonIconShow">显示代码</mim-button>
                                    </p>
                                </mim-col>
                                <mim-col span="12">
                                <textarea id="buttonIcon" disabled readonly>

                                    <mim-button type="primary"><i
                                            class='iconfont onlyIconfont'>&#xe60a;</i></mim-button>
                                    <mim-button type="primary"><i class='iconfont'>&#xe60a;</i>搜&nbsp;索</mim-button>
                                    <mim-button type="primary"><i
                                            class='iconfont iconfontRight'>&#xe605;</i>设&nbsp;置</mim-button>

                                </textarea>
                                </mim-col>
                            </mim-row>

                            <h3>加载中</h3>
                            <p>点击按钮后进行数据加载操作，在按钮上显示加载状态。</p>
                            <mim-row style="margin-top: 30px;text-align: center;line-height: 36px;">
                                <mim-col span="12" style="background: #ffffff">
                                    <div style="padding: 20px">
                                        <mim-button type="primary" loading="true">加载中</mim-button>
                                    </div>
                                    <p style="margin-top: 30px;background: #fafafa">要设置为 loading 状态，只要设置<span
                                            style="background: #e5e9f5">loading</span>属性为<span
                                            style="background: #e5e9f5">true</span>即可。</p>
                                    <p style="text-align: center;margin: 20px 0 25px 0">
                                        <mim-button type="primary" id="buttonLoaginShow">显示代码</mim-button>
                                    </p>
                                </mim-col>
                                <mim-col span="12">
                                <textarea id="buttonLoagin" disabled readonly>

                                    <mim-button type="primary" loading="true">加载中</mim-button>

                                </textarea>
                                </mim-col>
                            </mim-row>

                            <h3>不同尺寸</h3>
                            <p>Button 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的按钮尺寸。</p>
                            <mim-row style="margin-top: 30px;text-align: center;line-height: 36px;">
                                <mim-col span="12" style="background: #ffffff">
                                    <div style="padding: 20px" class="basisButton">
                                        <mim-button type="primary">默认按钮</mim-button>
                                        <mim-button type="primary" size="medium">中等按钮</mim-button>
                                        <mim-button type="primary" size="small">小型按钮</mim-button>
                                        <mim-button type="primary" size="mini">超小按钮</mim-button>
                                    </div>
                                    <div class="basisButton">
                                        <mim-button type="primary" round>默认按钮</mim-button>
                                        <mim-button type="primary" size="medium" round>中等按钮</mim-button>
                                        <mim-button type="primary" size="small" round>小型按钮</mim-button>
                                        <mim-button type="primary" size="mini" round>超小按钮</mim-button>
                                    </div>
                                    <p style="margin-top: 30px;background: #fafafa">
                                        额外的尺寸：medium、small、mini，通过设置size属性来配置它们。</p>
                                    <p style="text-align: center;margin: 20px 0 25px 0">
                                        <mim-button type="primary" id="buttonSizeShow">显示代码</mim-button>
                                    </p>
                                </mim-col>
                                <mim-col span="12">
                                <textarea id="buttonSize" disabled readonly>

                                    <mim-button type="primary">默认按钮</mim-button>
                                    <mim-button type="primary" size="medium">中等按钮</mim-button>
                                    <mim-button type="primary" size="small">小型按钮</mim-button>
                                    <mim-button type="primary" size="mini">超小按钮</mim-button>

                                    <mim-button type="primary" round>默认按钮</mim-button>
                                    <mim-button type="primary" size="medium" round>中等按钮</mim-button>
                                    <mim-button type="primary" size="small" round>小型按钮</mim-button>
                                    <mim-button type="primary" size="mini" round>超小按钮</mim-button>

                                </textarea>
                                </mim-col>
                            </mim-row>

                            <h3>参数说明</h3>
                            <mim-row style="margin-top: 30px;text-align: center;line-height: 36px">
                                <mim-col span="12" style="background: #ffffff;padding: 20px">
                                    <mim-table style="width: 100%;" stripe="true">
                                        <table class="mim-table mim-table-header-wrapper">
                                            <tr>
                                                <th class="is-leaf" width="100">
                                                    <div class="cell">参数</div>
                                                </th>
                                                <th class="is-leaf" width="150">
                                                    <div class="cell">说明</div>
                                                </th>
                                                <th class="is-leaf" width="100">
                                                    <div class="cell">类型</div>
                                                </th>
                                                <th class="is-leaf" width="180">
                                                    <div class="cell">可选值</div>
                                                </th>
                                                <th class="is-leaf" width="100">
                                                    <div class="cell">默认值</div>
                                                </th>
                                            </tr>
                                        </table>
                                        <table class="mim-table mim-table-body-wrapper">
                                            <tr>
                                                <td class="is-leaf" width="100">
                                                    <div class="cell">size</div>
                                                </td>
                                                <td class="is-leaf" width="150">
                                                    <div class="cell">尺寸</div>
                                                </td>
                                                <td class="is-leaf" width="100">
                                                    <div class="cell">string</div>
                                                </td>
                                                <td class="is-leaf" width="180">
                                                    <div class="cell">medium / small / mini</div>
                                                </td>
                                                <td class="is-leaf" width="100">
                                                    <div class="cell">——</div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="is-leaf" width="100">
                                                    <div class="cell">type</div>
                                                </td>
                                                <td class="is-leaf" width="150">
                                                    <div class="cell">类型</div>
                                                </td>
                                                <td class="is-leaf" width="100">
                                                    <div class="cell">string</div>
                                                </td>
                                                <td class="is-leaf" width="180">
                                                    <div class="cell">default / primary / success / warning / danger /
                                                        info / text
                                                    </div>
                                                </td>
                                                <td class="is-leaf" width="100">
                                                    <div class="cell">——</div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="is-leaf" width="100">
                                                    <div class="cell">plain</div>
                                                </td>
                                                <td class="is-leaf" width="150">
                                                    <div class="cell">是否朴素按钮</div>
                                                </td>
                                                <td class="is-leaf" width="100">
                                                    <div class="cell">boolean</div>
                                                </td>
                                                <td class="is-leaf" width="180">
                                                    <div class="cell">——</div>
                                                </td>
                                                <td class="is-leaf" width="100">
                                                    <div class="cell">false</div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="is-leaf" width="100">
                                                    <div class="cell">round</div>
                                                </td>
                                                <td class="is-leaf" width="150">
                                                    <div class="cell">是否圆角按钮</div>
                                                </td>
                                                <td class="is-leaf" width="100">
                                                    <div class="cell">boolean</div>
                                                </td>
                                                <td class="is-leaf" width="180">
                                                    <div class="cell">——</div>
                                                </td>
                                                <td class="is-leaf" width="100">
                                                    <div class="cell">false</div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="is-leaf" width="100">
                                                    <div class="cell">loading</div>
                                                </td>
                                                <td class="is-leaf" width="150">
                                                    <div class="cell">是否加载中状态</div>
                                                </td>
                                                <td class="is-leaf" width="100">
                                                    <div class="cell">boolean</div>
                                                </td>
                                                <td class="is-leaf" width="180">
                                                    <div class="cell">——</div>
                                                </td>
                                                <td class="is-leaf" width="100">
                                                    <div class="cell">false</div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="is-leaf" width="100">
                                                    <div class="cell">disabled</div>
                                                </td>
                                                <td class="is-leaf" width="150">
                                                    <div class="cell">是否禁用状态</div>
                                                </td>
                                                <td class="is-leaf" width="100">
                                                    <div class="cell">boolean</div>
                                                </td>
                                                <td class="is-leaf" width="180">
                                                    <div class="cell">——</div>
                                                </td>
                                                <td class="is-leaf" width="100">
                                                    <div class="cell">false</div>
                                                </td>
                                            </tr>
                                        </table>
                                    </mim-table>
                                </mim-col>
                            </mim-row>

                            <div class="upward"><i class="iconfont">&#xe626;</i></div>

                        </div>
                    </mim-main>
                    <mim-footer class="mim-footer">
                        <p class="previousPage"><i class="iconfont">&#xe668;</i><span style="margin-left: 40px"
                                                                                      index="container">Container 布局</span>
                        </p>
                        <p class="nextPage"><i class="iconfont">&#xe668;</i><span style="margin-right: 40px"
                                                                                  index="inputBox">Input 输入框</span></p>
                    </mim-footer>
                </mim-container>

            </div>
            <!--input 输入框-->
            <div class="inputBox detailsDiv">
                <mim-container>
                    <mim-header style="text-align: center"><h2>Input 输入框</h2></mim-header>
                    <mim-main>
                        <div class="vesselDiv">
                            <h3>Input 输入框</h3>
                            <p>通过鼠标或键盘输入字符</p>
                            <h3>基础用法(可添加id和class属性)</h3>
                            <mim-row style="margin-top: 30px;text-align: center;line-height: 36px;">
                                <mim-col span="12" style="background: #ffffff">
                                    <div class="basisInput">
                                        <mim-input placeholder="请输入内容"></mim-input>
                                    </div>
                                    <p style="text-align: center;margin: 20px 0 25px 0">
                                        <mim-button type="primary" id="inputBasicsShow">显示代码</mim-button>
                                    </p>
                                </mim-col>
                                <mim-col span="12">
                                <textarea id="inputBasics" disabled readonly>

                                    <mim-input placeholder="请输入内容"></mim-input>
                                    或者
                                    <mim-input type="text" placeholder="请输入内容"></mim-input>

                                </textarea>

                                </mim-col>
                            </mim-row>

                            <h3>禁用状态</h3>
                            <mim-row style="margin-top: 30px;text-align: center;line-height: 36px;">
                                <mim-col span="12" style="background: #ffffff">
                                    <div class="basisInput">
                                        <mim-input type="text" placeholder="请输入内容" disabled></mim-input>
                                    </div>
                                    <p style="margin-top: 30px;background: #fafafa">通过 <span
                                            style="background: #e5e9f5">disabled</span> 属性指定是否禁用 input 组件</p>
                                    <p style="text-align: center;margin: 20px 0 25px 0">
                                        <mim-button type="primary" id="inputDisabledShow">显示代码</mim-button>
                                    </p>
                                </mim-col>
                                <mim-col span="12">
                                <textarea id="inputDisabled" disabled readonly>

                                       <mim-input type="text" placeholder="请输入内容" disabled></mim-input>

                                </textarea>

                                </mim-col>
                            </mim-row>

                            <h3>可清空</h3>
                            <mim-row style="margin-top: 30px;text-align: center;line-height: 36px;">
                                <mim-col span="12" style="background: #ffffff">
                                    <div class="basisInput">
                                        <mim-input type="text" placeholder="请输入内容" clearable></mim-input>
                                    </div>
                                    <p style="margin-top: 30px;background: #fafafa">使用<span
                                            style="background: #e5e9f5">clearInput</span>属性即可得到一个可清空的输入框</p>
                                    <p style="text-align: center;margin: 20px 0 25px 0">
                                        <mim-button type="primary" id="inputClearShow">显示代码</mim-button>
                                    </p>
                                </mim-col>
                                <mim-col span="12">
                                <textarea id="inputClear" disabled readonly>

                                    <mim-input type="text" placeholder="请输入内容" clearable></mim-input>

                                </textarea>

                                </mim-col>
                            </mim-row>

                            <h3>密码框</h3>
                            <mim-row style="margin-top: 30px;text-align: center;line-height: 36px;">
                                <mim-col span="12" style="background: #ffffff">

                                    <div class="basisInput">
                                        <mim-input type="password" placeholder="请输入密码" show-password></mim-input>
                                    </div>
                                    <p style="margin-top: 30px;background: #fafafa">type属性为<span
                                            style="background: #e5e9f5">password</span>且使用<span
                                            style="background: #e5e9f5">show-password</span>属性即可得到一个可切换显示隐藏的密码框</p>
                                    <p style="text-align: center;margin: 20px 0 25px 0">
                                        <mim-button type="primary" id="inputPasswordShow">显示代码</mim-button>
                                    </p>
                                </mim-col>
                                <mim-col span="12">
                                <textarea id="inputPassword" disabled readonly>

                                     <mim-input type="password" placeholder="请输入密码" show-password></mim-input>

                                </textarea>

                                </mim-col>
                            </mim-row>

                            <h3>带 icon 的输入框</h3>
                            <mim-row style="margin-top: 30px;text-align: center;line-height: 36px;">
                                <mim-col span="12" style="background: #ffffff">
                                    <div class="basisInput">
                                        <mim-input type="text" placeholder="首部增加显示图标"
                                                   prefix-icon="&#xe60a;"></mim-input>
                                        <mim-input type="text" placeholder="尾部增加显示图标"
                                                   suffix-icon="&#xe669;"></mim-input>
                                    </div>
                                    <p style="margin-top: 30px;background: #fafafa">可以通过 <span
                                            style="background: #e5e9f5">prefix-icon</span> 和 <span
                                            style="background: #e5e9f5">suffix-icon</span> 属性在 input 组件首部和尾部增加显示图标。</p>
                                    <p style="text-align: center;margin: 20px 0 25px 0">
                                        <mim-button type="primary" id="inputIconShow">显示代码</mim-button>
                                    </p>
                                </mim-col>
                                <mim-col span="12">
                                <textarea id="inputIcon" disabled readonly>

                                    <mim-input type="text" placeholder="首部增加显示图标" prefix-icon="&#xe60a;"></mim-input>
                                    <mim-input type="text" placeholder="尾部增加显示图标" suffix-icon="&#xe669;"></mim-input>

                                </textarea>

                                </mim-col>
                            </mim-row>

                            <h3>尺寸</h3>
                            <mim-row style="margin-top: 30px;text-align: center;line-height: 36px;">
                                <mim-col span="12" style="background: #ffffff">
                                    <div class="basisInput">
                                        <mim-input type="text" placeholder="默认尺寸"
                                                   style="margin-right: 20px"></mim-input>
                                        <mim-input type="text" placeholder="中等尺寸" size="medium"></mim-input>
                                        <br>
                                        <mim-input type="text" placeholder="小尺寸" size="small"
                                                   style="margin: 10px 20px 0 0 "></mim-input>
                                        <mim-input type="text" placeholder="超小尺寸" size="mini"></mim-input>
                                    </div>
                                    <p style="margin-top: 30px;background: #fafafa">可通过 size 属性指定输入框的尺寸，除了默认的大小外，还提供了
                                        large、small 和 mini 三种尺寸。</p>
                                    <p style="text-align: center;margin: 20px 0 25px 0">
                                        <mim-button type="primary" id="inputSizeShow">显示代码</mim-button>
                                    </p>
                                </mim-col>
                                <mim-col span="12">
                                <textarea id="inputSize" disabled readonly>

                                        <mim-input type="text" placeholder="默认尺寸"></mim-input>
                                        <mim-input type="text" placeholder="中等尺寸" size="medium"></mim-input>
                                        <mim-input type="text" placeholder="小尺寸" size="small"></mim-input>
                                        <mim-input type="text" placeholder="超小尺寸" size="mini"></mim-input>

                                </textarea>

                                </mim-col>
                            </mim-row>

                            <h3>输入长度限制</h3>
                            <mim-row style="margin-top: 30px;text-align: center;line-height: 36px;">
                                <mim-col span="12" style="background: #ffffff">
                                    <div class="basisInput">
                                        <mim-input type="text" placeholder="最多输入10个字符" maxlength="10"
                                                   show-word-limit></mim-input>
                                    </div>
                                    <p style="margin-top: 30px;background: #fafafa">在使用 maxlength 属性限制最大输入长度的同时，
                                        可通过设置 <span style="background: #e5e9f5">show-word-limit</span> 属性来展示字数统计。</p>
                                    <p style="text-align: center;margin: 20px 0 25px 0">
                                        <mim-button type="primary" id="inputWordLimitShow">显示代码</mim-button>
                                    </p>
                                </mim-col>
                                <mim-col span="12">
                                <textarea id="inputWordLimit" disabled readonly>

                                   <mim-input type="text" placeholder="最多输入10个字符" maxlength="10"
                                              show-word-limit></mim-input>

                                </textarea>

                                </mim-col>
                            </mim-row>

                            <h3>参数说明</h3>
                            <mim-row style="margin-top: 30px;text-align: center;line-height: 36px">
                                <mim-col span="12" style="background: #ffffff;padding: 20px">
                                    <mim-table style="width: 100%;" stripe="true">
                                        <table class="mim-table mim-table-header-wrapper">
                                            <tr>
                                                <th class="is-leaf" width="100">
                                                    <div class="cell">参数</div>
                                                </th>
                                                <th class="is-leaf" width="150">
                                                    <div class="cell">说明</div>
                                                </th>
                                                <th class="is-leaf" width="100">
                                                    <div class="cell">类型</div>
                                                </th>
                                                <th class="is-leaf" width="180">
                                                    <div class="cell">可选值</div>
                                                </th>
                                                <th class="is-leaf" width="100">
                                                    <div class="cell">默认值</div>
                                                </th>
                                            </tr>
                                        </table>
                                        <table class="mim-table mim-table-body-wrapper">
                                            <tr>
                                                <td class="is-leaf" width="100">
                                                    <div class="cell">size</div>
                                                </td>
                                                <td class="is-leaf" width="150">
                                                    <div class="cell">尺寸</div>
                                                </td>
                                                <td class="is-leaf" width="100">
                                                    <div class="cell">string</div>
                                                </td>
                                                <td class="is-leaf" width="180">
                                                    <div class="cell">medium / small / mini</div>
                                                </td>
                                                <td class="is-leaf" width="100">
                                                    <div class="cell">——</div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="is-leaf" width="100">
                                                    <div class="cell">type</div>
                                                </td>
                                                <td class="is-leaf" width="150">
                                                    <div class="cell">类型</div>
                                                </td>
                                                <td class="is-leaf" width="100">
                                                    <div class="cell">string</div>
                                                </td>
                                                <td class="is-leaf" width="180">
                                                    <div class="cell">text，password 和其他 原生 input 的 type 值</div>
                                                </td>
                                                <td class="is-leaf" width="100">
                                                    <div class="cell">——</div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="is-leaf" width="100">
                                                    <div class="cell">clearable</div>
                                                </td>
                                                <td class="is-leaf" width="150">
                                                    <div class="cell">是否可清空</div>
                                                </td>
                                                <td class="is-leaf" width="100">
                                                    <div class="cell">boolean</div>
                                                </td>
                                                <td class="is-leaf" width="180">
                                                    <div class="cell">——</div>
                                                </td>
                                                <td class="is-leaf" width="100">
                                                    <div class="cell">false</div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="is-leaf" width="100">
                                                    <div class="cell">show-password</div>
                                                </td>
                                                <td class="is-leaf" width="150">
                                                    <div class="cell">是否显示密码</div>
                                                </td>
                                                <td class="is-leaf" width="100">
                                                    <div class="cell">boolean</div>
                                                </td>
                                                <td class="is-leaf" width="180">
                                                    <div class="cell">——</div>
                                                </td>
                                                <td class="is-leaf" width="100">
                                                    <div class="cell">false</div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="is-leaf" width="100">
                                                    <div class="cell">prefix-icon</div>
                                                </td>
                                                <td class="is-leaf" width="150">
                                                    <div class="cell">首部显示图标</div>
                                                </td>
                                                <td class="is-leaf" width="100">
                                                    <div class="cell">string</div>
                                                </td>
                                                <td class="is-leaf" width="180">
                                                    <div class="cell">——</div>
                                                </td>
                                                <td class="is-leaf" width="100">
                                                    <div class="cell">——</div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="is-leaf" width="100">
                                                    <div class="cell">suffix-icon</div>
                                                </td>
                                                <td class="is-leaf" width="150">
                                                    <div class="cell">尾部显示图标</div>
                                                </td>
                                                <td class="is-leaf" width="100">
                                                    <div class="cell">string</div>
                                                </td>
                                                <td class="is-leaf" width="180">
                                                    <div class="cell">——</div>
                                                </td>
                                                <td class="is-leaf" width="100">
                                                    <div class="cell">——</div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="is-leaf" width="100">
                                                    <div class="cell">disabled</div>
                                                </td>
                                                <td class="is-leaf" width="150">
                                                    <div class="cell">是否禁用状态</div>
                                                </td>
                                                <td class="is-leaf" width="100">
                                                    <div class="cell">boolean</div>
                                                </td>
                                                <td class="is-leaf" width="180">
                                                    <div class="cell">——</div>
                                                </td>
                                                <td class="is-leaf" width="100">
                                                    <div class="cell">false</div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="is-leaf" width="100">
                                                    <div class="cell">maxlength</div>
                                                </td>
                                                <td class="is-leaf" width="150">
                                                    <div class="cell">限制最大输入长度</div>
                                                </td>
                                                <td class="is-leaf" width="100">
                                                    <div class="cell">string</div>
                                                </td>
                                                <td class="is-leaf" width="180">
                                                    <div class="cell">——</div>
                                                </td>
                                                <td class="is-leaf" width="100">
                                                    <div class="cell">——</div>
                                                </td>
                                            </tr>
                                        </table>
                                    </mim-table>
                                </mim-col>
                            </mim-row>

                            <div class="upward"><i class="iconfont">&#xe626;</i></div>
                        </div>
                    </mim-main>
                    <mim-footer class="mim-footer">
                        <p class="previousPage"><i class="iconfont">&#xe668;</i><span style="margin-left: 40px"
                                                                                      index="buttonSwitch">Button 按钮</span>
                        </p>
                        <p class="nextPage"><i class="iconfont">&#xe668;</i><span style="margin-right: 40px"
                                                                                  index="navSide">NavSide导航侧栏</span></p>
                    </mim-footer>
                </mim-container>
            </div>
            <!--导航侧栏-->
            <div class="navSide detailsDiv">
                <mim-container>
                    <mim-header style="text-align: center"><h2>NavSide 导航侧栏</h2></mim-header>
                    <mim-main>
                        <div class="vesselDiv">

                            <h3>默认颜色</h3>
                            <mim-row style="margin-top: 30px;line-height: 36px;">
                                <mim-col span="12" style="background: #ffffff">
                                    <div class="basisInput">
                                        <div style="width: 300px">
                                            <mim-menu default-active="5">
                                                <ul>
                                                    <li>
                                                        <div class="mim-menu">
                                                            <i class="iconfont">&#xe624;</i>
                                                            <span index="1">导航一</span>
                                                            <i class="iconfont icon-copy-down" bool="false">&#xe668;</i>
                                                        </div>
                                                        <ul class="second-mim-menu">
                                                            <li class="mim-menu-item">
                                                                <span index="2">导航一（1）</span>
                                                            </li>
                                                            <li class="mim-menu-item">
                                                                <span index="3">导航一（2）</span>
                                                            </li>
                                                        </ul>
                                                    </li>
                                                    <li>
                                                        <div class="mim-menu disabled">
                                                            <i class="iconfont">&#xe621;</i>
                                                            <span index="4">导航二</span>
                                                        </div>
                                                    </li>
                                                    <li class="">
                                                        <div class="mim-menu">
                                                            <i class="iconfont">&#xe66b;</i>
                                                            <span index="5">导航三</span>
                                                        </div>
                                                    </li>
                                                    <li>
                                                        <div class="mim-menu">
                                                            <i class="iconfont">&#xe605;</i>
                                                            <span index="6">导航四</span>
                                                        </div>
                                                    </li>
                                                </ul>
                                            </mim-menu>
                                        </div>
                                    </div>
                                    <p style="margin-top: 30px;background: #fafafa;text-align: center">使用<span
                                            style="background: #e5e9f5">default-active</span>
                                        属性，来定义默认点击后展示的位置</p>
                                    <p style="text-align: center;margin: 20px 0 25px 0">
                                        <mim-button type="primary" id="navSideShow">显示代码</mim-button>
                                    </p>
                                </mim-col>
                                <mim-col span="12">
                                <textarea id="navSide" disabled readonly>

                                        <mim-menu default-active="5">
                                            <ul>
                                                <li>
                                                    <div class="mim-menu">
                                                        <i class="iconfont">&#xe624;</i>
                                                        <span index="1">导航一</span>
                                                        <i class="iconfont icon-copy-down" bool="false">&#xe668;</i>
                                                    </div>
                                                    <ul class="second-mim-menu">
                                                        <li class="mim-menu-item">
                                                            <span index="2">导航一（1）</span>
                                                        </li>
                                                        <li class="mim-menu-item">
                                                            <span index="3">导航一（2）</span>
                                                        </li>
                                                    </ul>
                                                </li>
                                                <li>
                                                    <div class="mim-menu disabled">
                                                        <i class="iconfont">&#xe621;</i>
                                                        <span index="4">导航二</span>
                                                    </div>
                                                </li>
                                                <li class="">
                                                    <div class="mim-menu">
                                                        <i class="iconfont">&#xe66b;</i>
                                                        <span index="5">导航三</span>
                                                    </div>
                                                </li>
                                                <li>
                                                    <div class="mim-menu">
                                                        <i class="iconfont">&#xe605;</i>
                                                        <span index="6">导航四</span>
                                                    </div>
                                                </li>
                                            </ul>
                                        </mim-menu>

                                </textarea>

                                </mim-col>
                            </mim-row>

                            <h3>自定义颜色</h3>
                            <mim-row style="margin-top: 30px;line-height: 36px;">
                                <mim-col span="12" style="background: #ffffff">
                                    <div class="basisInput">
                                        <div style="width: 300px">
                                            <mim-menu default-active="5" background-color="#324057" text-color="#ffffff"
                                                      hover-bgColor="rgba(30,47,76,.92)" hover-textColor="#ffffff">
                                                <ul>
                                                    <li>
                                                        <div class="mim-menu">
                                                            <i class="iconfont">&#xe624;</i>
                                                            <span index="1">导航一</span>
                                                            <i class="iconfont icon-copy-down" bool="false">&#xe668;</i>
                                                        </div>
                                                        <ul class="second-mim-menu">
                                                            <li class="mim-menu-item">
                                                                <span index="2">导航一（1）</span>
                                                            </li>
                                                            <li class="mim-menu-item">
                                                                <span index="3">导航一（2）</span>
                                                            </li>
                                                        </ul>
                                                    </li>
                                                    <li>
                                                        <div class="mim-menu disabled">
                                                            <i class="iconfont">&#xe621;</i>
                                                            <span index="4">导航二</span>
                                                        </div>
                                                    </li>
                                                    <li class="">
                                                        <div class="mim-menu">
                                                            <i class="iconfont">&#xe66b;</i>
                                                            <span index="5">导航三</span>
                                                        </div>
                                                    </li>
                                                    <li>
                                                        <div class="mim-menu">
                                                            <i class="iconfont">&#xe605;</i>
                                                            <span index="6">导航四</span>
                                                        </div>
                                                    </li>
                                                </ul>
                                            </mim-menu>
                                        </div>
                                    </div>
                                    <p style="margin-top: 30px;background: #fafafa;text-align: center">使用<span
                                            style="background: #e5e9f5">background-color</span>
                                        属性，来定义背景色</p>
                                    <p style="margin-top: 5px;background: #fafafa;text-align: center">使用<span
                                            style="background: #e5e9f5">text-color</span>
                                        属性，来定义字体色</p>
                                    <p style="margin-top: 5px;background: #fafafa;text-align: center">使用<span
                                            style="background: #e5e9f5">hover-bgColor</span>
                                        属性，来定义鼠标划过背景色</p>
                                    <p style="margin-top: 5px;background: #fafafa;text-align: center">使用<span
                                            style="background: #e5e9f5">hover-textColor</span>
                                        属性，来定义鼠标划过字体色</p>
                                    <p style="text-align: center;margin: 20px 0 25px 0">
                                        <mim-button type="primary" id="navSideStyleShow">显示代码</mim-button>
                                    </p>
                                </mim-col>
                                <mim-col span="12">
                                <textarea id="navSideStyle" disabled readonly>

                                    <mim-menu default-active="5" background-color="#324057" text-color="#ffffff"
                                              hover-bgColor="rgba(30,47,76,.92)" hover-textColor="#ffffff">
                                                <ul>
                                                    <li>
                                                        <div class="mim-menu">
                                                            <i class="iconfont">&#xe624;</i>
                                                            <span index="1">导航一</span>
                                                            <i class="iconfont icon-copy-down" bool="false">&#xe668;</i>
                                                        </div>
                                                        <ul class="second-mim-menu">
                                                            <li class="mim-menu-item">
                                                                <span index="2">导航一（1）</span>
                                                            </li>
                                                            <li class="mim-menu-item">
                                                                <span index="3">导航一（2）</span>
                                                            </li>
                                                        </ul>
                                                    </li>
                                                    <li>
                                                        <div class="mim-menu disabled">
                                                            <i class="iconfont">&#xe621;</i>
                                                            <span index="4">导航二</span>
                                                        </div>
                                                    </li>
                                                    <li class="">
                                                        <div class="mim-menu">
                                                            <i class="iconfont">&#xe66b;</i>
                                                            <span index="5">导航三</span>
                                                        </div>
                                                    </li>
                                                    <li>
                                                        <div class="mim-menu">
                                                            <i class="iconfont">&#xe605;</i>
                                                            <span index="6">导航四</span>
                                                        </div>
                                                    </li>
                                                </ul>
                                            </mim-menu>

                                </textarea>

                                </mim-col>
                            </mim-row>

                            <h3>参数说明</h3>
                            <mim-row style="margin-top: 30px;text-align: center;line-height: 36px">
                                <mim-col span="12" style="background: #ffffff;padding: 20px">
                                    <mim-table style="width: 100%;" stripe="true">
                                        <table class="mim-table mim-table-header-wrapper">
                                            <tr>
                                                <th class="is-leaf" width="100">
                                                    <div class="cell">参数</div>
                                                </th>
                                                <th class="is-leaf" width="150">
                                                    <div class="cell">说明</div>
                                                </th>
                                                <th class="is-leaf" width="100">
                                                    <div class="cell">类型</div>
                                                </th>
                                                <th class="is-leaf" width="180">
                                                    <div class="cell">可选值</div>
                                                </th>
                                                <th class="is-leaf" width="100">
                                                    <div class="cell">默认值</div>
                                                </th>
                                            </tr>
                                        </table>
                                        <table class="mim-table mim-table-body-wrapper">
                                            <tr>
                                                <td class="is-leaf" width="100">
                                                    <div class="cell">default-active</div>
                                                </td>
                                                <td class="is-leaf" width="150">
                                                    <div class="cell">当前激活菜单的 index</div>
                                                </td>
                                                <td class="is-leaf" width="100">
                                                    <div class="cell">string</div>
                                                </td>
                                                <td class="is-leaf" width="180">
                                                    <div class="cell">——</div>
                                                </td>
                                                <td class="is-leaf" width="100">
                                                    <div class="cell">——</div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="is-leaf" width="100">
                                                    <div class="cell">background-color</div>
                                                </td>
                                                <td class="is-leaf" width="150">
                                                    <div class="cell">菜单的背景色</div>
                                                </td>
                                                <td class="is-leaf" width="100">
                                                    <div class="cell">string</div>
                                                </td>
                                                <td class="is-leaf" width="180">
                                                    <div class="cell">——</div>
                                                </td>
                                                <td class="is-leaf" width="100">
                                                    <div class="cell">#ffffff</div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="is-leaf" width="100">
                                                    <div class="cell">text-color</div>
                                                </td>
                                                <td class="is-leaf" width="150">
                                                    <div class="cell">菜单的文字颜色</div>
                                                </td>
                                                <td class="is-leaf" width="100">
                                                    <div class="cell">string</div>
                                                </td>
                                                <td class="is-leaf" width="180">
                                                    <div class="cell">——</div>
                                                </td>
                                                <td class="is-leaf" width="100">
                                                    <div class="cell">#000000</div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="is-leaf" width="100">
                                                    <div class="cell">hover-bgColor</div>
                                                </td>
                                                <td class="is-leaf" width="150">
                                                    <div class="cell">鼠标滑过侧栏背景色</div>
                                                </td>
                                                <td class="is-leaf" width="100">
                                                    <div class="cell">string</div>
                                                </td>
                                                <td class="is-leaf" width="180">
                                                    <div class="cell">——</div>
                                                </td>
                                                <td class="is-leaf" width="100">
                                                    <div class="cell">#ecf5ff</div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="is-leaf" width="100">
                                                    <div class="cell">hover-textColor</div>
                                                </td>
                                                <td class="is-leaf" width="150">
                                                    <div class="cell">鼠标滑过后字体颜色</div>
                                                </td>
                                                <td class="is-leaf" width="100">
                                                    <div class="cell">string</div>
                                                </td>
                                                <td class="is-leaf" width="180">
                                                    <div class="cell">——</div>
                                                </td>
                                                <td class="is-leaf" width="100">
                                                    <div class="cell">#000000</div>
                                                </td>
                                            </tr>
                                        </table>
                                    </mim-table>
                                </mim-col>
                            </mim-row>

                            <div class="upward"><i class="iconfont">&#xe626;</i></div>
                        </div>
                    </mim-main>
                    <mim-footer class="mim-footer">
                        <p class="previousPage"><i class="iconfont">&#xe668;</i><span style="margin-left: 40px"
                                                                                      index="inputBox">Input 输入框</span>
                        </p>
                        <p class="nextPage"><i class="iconfont">&#xe668;</i><span style="margin-right: 40px"
                                                                                  index="mimLoading">Loading 加载</span>
                        </p>
                    </mim-footer>
                </mim-container>
            </div>
            <!--loading 加载-->
            <div class="mimLoading detailsDiv">
                <mim-container>
                    <mim-header style="text-align: center"><h2>Loading 加载</h2></mim-header>
                    <mim-main>
                        <div class="vesselDiv">
                            <h3>Loading 加载</h3>
                            <p>加载数据时显示动效。</p>
                            <mim-row style="margin-top: 30px;line-height: 36px;">
                                <mim-col span="12" style="background: #ffffff;text-align: center">
                                    <div class="basisInput">
                                        <div style="width: 100%;height: 500px;background: #19b6f8;position: relative">
                                            <mim-loading loading="true"></mim-loading>
                                        </div>
                                    </div>
                                    <p style="margin-top: 30px;background: #fafafa;text-align: center">
                                        加入mim-loading使用<span style="background: #e5e9f5">loading</span>
                                        为true属性，来定义默认加载（注：父组件必须有position定位）</p>
                                    <p style="text-align: center;margin: 20px 0 25px 0">
                                        <mim-button type="primary" id="mimLoadingShow">显示代码</mim-button>
                                    </p>
                                </mim-col>
                                <mim-col span="12">
                                <textarea id="mimLoading" disabled readonly>

                                     <mim-loading loading="true"></mim-loading>

                                </textarea>

                                </mim-col>
                            </mim-row>
                            <h3>自定义</h3>
                            <p> 可自定义加载文案、图标和背景色。</p>
                            <mim-row style="margin-top: 30px;line-height: 36px;">
                                <mim-col span="12" style="background: #ffffff;text-align: center">
                                    <div class="basisInput">
                                        <div style="width: 100%;height: 500px;background: #ffffff;position: relative">
                                            <mim-loading loading="true" loading-text="拼命加载中..."
                                                         loading-spinner="&#xe699;"
                                                         loading-background="rgba(0, 0, 0, 0.8)"></mim-loading>
                                        </div>
                                    </div>
                                    <p style="margin-top: 30px;background: #fafafa;text-align: center">使用<span
                                            style="background: #e5e9f5">loading-text</span>
                                        属性，来定义提示的语句</p>
                                    <p style="margin-top: 5px;background: #fafafa;text-align: center">使用<span
                                            style="background: #e5e9f5">loading-spinner</span>
                                        属性，来定义加载的图标</p>
                                    <p style="margin-top: 5px;background: #fafafa;text-align: center">使用<span
                                            style="background: #e5e9f5">loading-background</span>
                                        属性，来定义加载背景色</p>
                                    <p style="text-align: center;margin: 20px 0 25px 0">
                                        <mim-button type="primary" id="mimLoadingStyleShow">显示代码</mim-button>
                                    </p>
                                </mim-col>
                                <mim-col span="12">
                                <textarea id="mimLoadingStyle" disabled readonly>

                                    <mim-loading loading="true"
                                                 loading-text="拼命加载中..."
                                                 loading-spinner="&#xe699;"
                                                 loading-background="rgba(0, 0, 0, 0.8)">
                                    </mim-loading>

                                </textarea>

                                </mim-col>
                            </mim-row>
                            <h3>整页加载</h3>
                            <p> 页面数据加载时显示。</p>
                            <mim-row style="margin-top: 30px;line-height: 36px;">
                                <mim-col span="12" style="background: #ffffff;text-align: center">
                                    <div class="basisInput">
                                        <mim-button type="primary" id="loadingClickShow">点击展示</mim-button>
                                    </div>
                                    <p style="text-align: center;margin: 20px 0 25px 0">
                                        <mim-button type="primary" id="mimLoadingEntiretyShow">显示代码</mim-button>
                                    </p>
                                </mim-col>
                                <mim-col span="12">
                                <textarea id="mimLoadingEntirety" disabled readonly>

                                    <mim-loading loading="true"></mim-loading>

                                </textarea>

                                </mim-col>
                            </mim-row>
                            <h3>参数说明</h3>
                            <mim-row style="margin-top: 30px;text-align: center;line-height: 36px">
                                <mim-col span="12" style="background: #ffffff;padding: 20px">
                                    <mim-table style="width: 100%;" stripe="true">
                                        <table class="mim-table mim-table-header-wrapper">
                                            <tr>
                                                <th class="is-leaf" width="100">
                                                    <div class="cell">参数</div>
                                                </th>
                                                <th class="is-leaf" width="150">
                                                    <div class="cell">说明</div>
                                                </th>
                                                <th class="is-leaf" width="100">
                                                    <div class="cell">类型</div>
                                                </th>
                                                <th class="is-leaf" width="180">
                                                    <div class="cell">可选值</div>
                                                </th>
                                                <th class="is-leaf" width="100">
                                                    <div class="cell">默认值</div>
                                                </th>
                                            </tr>
                                        </table>
                                        <table class="mim-table mim-table-body-wrapper">
                                            <tr>
                                                <td class="is-leaf" width="100">
                                                    <div class="cell">loading</div>
                                                </td>
                                                <td class="is-leaf" width="150">
                                                    <div class="cell">是否加载</div>
                                                </td>
                                                <td class="is-leaf" width="100">
                                                    <div class="cell">boolean</div>
                                                </td>
                                                <td class="is-leaf" width="180">
                                                    <div class="cell">true / false</div>
                                                </td>
                                                <td class="is-leaf" width="100">
                                                    <div class="cell">false</div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="is-leaf" width="100">
                                                    <div class="cell">loading-text</div>
                                                </td>
                                                <td class="is-leaf" width="150">
                                                    <div class="cell">定义加载的提示语句</div>
                                                </td>
                                                <td class="is-leaf" width="100">
                                                    <div class="cell">string</div>
                                                </td>
                                                <td class="is-leaf" width="180">
                                                    <div class="cell">——</div>
                                                </td>
                                                <td class="is-leaf" width="100">
                                                    <div class="cell">——</div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="is-leaf" width="100">
                                                    <div class="cell">loading-spinner</div>
                                                </td>
                                                <td class="is-leaf" width="150">
                                                    <div class="cell">定义加载图标的icon</div>
                                                </td>
                                                <td class="is-leaf" width="100">
                                                    <div class="cell">string</div>
                                                </td>
                                                <td class="is-leaf" width="180">
                                                    <div class="cell">——</div>
                                                </td>
                                                <td class="is-leaf" width="100">
                                                    <div class="cell">——</div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="is-leaf" width="100">
                                                    <div class="cell">loading-background</div>
                                                </td>
                                                <td class="is-leaf" width="150">
                                                    <div class="cell">定义加载背景色</div>
                                                </td>
                                                <td class="is-leaf" width="100">
                                                    <div class="cell">string</div>
                                                </td>
                                                <td class="is-leaf" width="180">
                                                    <div class="cell">——</div>
                                                </td>
                                                <td class="is-leaf" width="100">
                                                    <div class="cell">——</div>
                                                </td>
                                            </tr>
                                        </table>
                                    </mim-table>
                                </mim-col>
                            </mim-row>
                            <div class="upward"><i class="iconfont">&#xe626;</i></div>
                        </div>
                    </mim-main>
                    <mim-footer class="mim-footer">
                        <p class="previousPage"><i class="iconfont">&#xe668;</i><span style="margin-left: 40px"
                                                                                      index="navSide">navSide 导航侧栏</span>
                        </p>
                        <p class="nextPage"><i class="iconfont">&#xe668;</i><span style="margin-right: 40px"
                                                                                  index="mimTable">Table 表格</span></p>
                    </mim-footer>
                </mim-container>
            </div>
            <!--Table 表格-->
            <div class="mimTable detailsDiv">
                <mim-container>
                    <mim-header style="text-align: center"><h2>Table 表格</h2></mim-header>
                    <mim-main>
                        <div class="vesselDiv">
                            <h3>Table 表格</h3>
                            <p>用于展示多条结构类似的数据操作。</p>
                            <h3>基础表格</h3>
                            <p>基础的表格展示用法。</p>
                            <mim-row style="margin-top: 30px;">
                                <mim-col span="12" style="background: #ffffff;text-align: center">
                                    <div class="basisInput">
                                        <mim-table style="width: 100%">
                                            <table class="mim-table mim-table-header-wrapper">
                                                <tr>
                                                    <th class="is-leaf" width="100">
                                                        <div class="cell">日期</div>
                                                    </th>
                                                    <th class="is-leaf" width="100">
                                                        <div class="cell">姓名</div>
                                                    </th>
                                                    <th class="is-leaf" width="300">
                                                        <div class="cell">地址</div>
                                                    </th>
                                                </tr>
                                            </table>
                                            <table class="mim-table mim-table-body-wrapper">
                                                <tr>
                                                    <td class="is-leaf" width="100">
                                                        <div class="cell">2019-1-1</div>
                                                    </td>
                                                    <td class="is-leaf" width="100">
                                                        <div class="cell">张三</div>
                                                    </td>
                                                    <td class="is-leaf" width="300">
                                                        <div class="cell">郑州市金水区查查路</div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="is-leaf">
                                                        <div class="cell">2019-1-2</div>
                                                    </td>
                                                    <td class="is-leaf">
                                                        <div class="cell">张麻子</div>
                                                    </td>
                                                    <td class="is-leaf">
                                                        <div class="cell">郑州市郑东新区查查路</div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="is-leaf">
                                                        <div class="cell">2019-1-3</div>
                                                    </td>
                                                    <td class="is-leaf">
                                                        <div class="cell">王二小</div>
                                                    </td>
                                                    <td class="is-leaf">
                                                        <div class="cell">郑州市二七区错错路</div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="is-leaf">
                                                        <div class="cell">2019-1-4</div>
                                                    </td>
                                                    <td class="is-leaf">
                                                        <div class="cell">王五</div>
                                                    </td>
                                                    <td class="is-leaf">
                                                        <div class="cell">郑州市商都路</div>
                                                    </td>
                                                </tr>
                                            </table>
                                        </mim-table>
                                    </div>
                                    <p style="text-align: center;margin: 20px 0 25px 0">
                                        <mim-button type="primary" id="mimTableShow">显示代码</mim-button>
                                    </p>
                                </mim-col>
                                <mim-col span="12">
                                <textarea id="mimTable" disabled readonly>

                                     <mim-table style="width: 100%">
                                            <table class="mim-table mim-table-header-wrapper">
                                                <tr>
                                                    <th class="is-leaf" width="100">
                                                        <div class="cell">日期</div>
                                                    </th>
                                                    <th class="is-leaf" width="100">
                                                        <div class="cell">姓名</div>
                                                    </th>
                                                    <th class="is-leaf" width="300">
                                                        <div class="cell">地址</div>
                                                    </th>
                                                </tr>
                                            </table>
                                            <table class="mim-table mim-table-body-wrapper">
                                                <tr>
                                                    <td class="is-leaf" width="100">
                                                        <div class="cell">2019-1-1</div>
                                                    </td>
                                                    <td class="is-leaf" width="100">
                                                        <div class="cell">张三</div>
                                                    </td>
                                                    <td class="is-leaf" width="300">
                                                        <div class="cell">郑州市金水区查查路</div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="is-leaf">
                                                        <div class="cell">2019-1-2</div>
                                                    </td>
                                                    <td class="is-leaf">
                                                        <div class="cell">张麻子</div>
                                                    </td>
                                                    <td class="is-leaf">
                                                        <div class="cell">郑州市郑东新区查查路</div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="is-leaf">
                                                        <div class="cell">2019-1-3</div>
                                                    </td>
                                                    <td class="is-leaf">
                                                        <div class="cell">王二小</div>
                                                    </td>
                                                    <td class="is-leaf">
                                                        <div class="cell">郑州市二七区错错路</div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="is-leaf">
                                                        <div class="cell">2019-1-4</div>
                                                    </td>
                                                    <td class="is-leaf">
                                                        <div class="cell">王五</div>
                                                    </td>
                                                    <td class="is-leaf">
                                                        <div class="cell">郑州市商都路</div>
                                                    </td>
                                                </tr>
                                            </table>
                                     </mim-table>

                                </textarea>

                                </mim-col>
                            </mim-row>
                            <h3>带斑马纹表格</h3>
                            <p> 使用带斑马纹的表格，可以更容易区分出不同行的数据。</p>
                            <mim-row style="margin-top: 30px">
                                <mim-col span="12" style="background: #ffffff;text-align: center">
                                    <div class="basisInput">
                                        <mim-table style="width: 100%" stripe="true">
                                            <table class="mim-table mim-table-header-wrapper">
                                                <tr>
                                                    <th class="is-leaf" width="100">
                                                        <div class="cell">日期</div>
                                                    </th>
                                                    <th class="is-leaf" width="100">
                                                        <div class="cell">姓名</div>
                                                    </th>
                                                    <th class="is-leaf" width="300">
                                                        <div class="cell">地址</div>
                                                    </th>
                                                </tr>
                                            </table>
                                            <table class="mim-table mim-table-body-wrapper">
                                                <tr>
                                                    <td class="is-leaf" width="100">
                                                        <div class="cell">2019-1-1</div>
                                                    </td>
                                                    <td class="is-leaf" width="100">
                                                        <div class="cell">张三</div>
                                                    </td>
                                                    <td class="is-leaf" width="300">
                                                        <div class="cell">郑州市金水区查查路</div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="is-leaf">
                                                        <div class="cell">2019-1-2</div>
                                                    </td>
                                                    <td class="is-leaf">
                                                        <div class="cell">张麻子</div>
                                                    </td>
                                                    <td class="is-leaf">
                                                        <div class="cell">郑州市郑东新区查查路</div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="is-leaf">
                                                        <div class="cell">2019-1-3</div>
                                                    </td>
                                                    <td class="is-leaf">
                                                        <div class="cell">王二小</div>
                                                    </td>
                                                    <td class="is-leaf">
                                                        <div class="cell">郑州市二七区错错路</div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="is-leaf">
                                                        <div class="cell">2019-1-4</div>
                                                    </td>
                                                    <td class="is-leaf">
                                                        <div class="cell">王五</div>
                                                    </td>
                                                    <td class="is-leaf">
                                                        <div class="cell">郑州市商都路</div>
                                                    </td>
                                                </tr>
                                            </table>
                                        </mim-table>
                                    </div>
                                    <p style="background: #fafafa;text-align: center"><span style="background: #e5e9f5">stripe</span>属性可以创建带斑马纹的表格。它接受一个Boolean，默认为false，设置为true即为启用。
                                    </p>
                                    <p style="text-align: center;margin: 20px 0 25px 0">
                                        <mim-button type="primary" id="mimTableStripeShow">显示代码</mim-button>
                                    </p>
                                </mim-col>
                                <mim-col span="12">
                                <textarea id="mimTableStripe" disabled readonly>

                                    <mim-table style="width: 100%" stripe="true">
                                            <table class="mim-table mim-table-header-wrapper">
                                                <tr>
                                                    <th class="is-leaf" width="100">
                                                        <div class="cell">日期</div>
                                                    </th>
                                                    <th class="is-leaf" width="100">
                                                        <div class="cell">姓名</div>
                                                    </th>
                                                    <th class="is-leaf" width="300">
                                                        <div class="cell">地址</div>
                                                    </th>
                                                </tr>
                                            </table>
                                            <table class="mim-table mim-table-body-wrapper">
                                                <tr>
                                                    <td class="is-leaf" width="100">
                                                        <div class="cell">2019-1-1</div>
                                                    </td>
                                                    <td class="is-leaf" width="100">
                                                        <div class="cell">张三</div>
                                                    </td>
                                                    <td class="is-leaf" width="300">
                                                        <div class="cell">郑州市金水区查查路</div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="is-leaf">
                                                        <div class="cell">2019-1-2</div>
                                                    </td>
                                                    <td class="is-leaf">
                                                        <div class="cell">张麻子</div>
                                                    </td>
                                                    <td class="is-leaf">
                                                        <div class="cell">郑州市郑东新区查查路</div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="is-leaf">
                                                        <div class="cell">2019-1-3</div>
                                                    </td>
                                                    <td class="is-leaf">
                                                        <div class="cell">王二小</div>
                                                    </td>
                                                    <td class="is-leaf">
                                                        <div class="cell">郑州市二七区错错路</div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="is-leaf">
                                                        <div class="cell">2019-1-4</div>
                                                    </td>
                                                    <td class="is-leaf">
                                                        <div class="cell">王五</div>
                                                    </td>
                                                    <td class="is-leaf">
                                                        <div class="cell">郑州市商都路</div>
                                                    </td>
                                                </tr>
                                            </table>
                                    </mim-table>

                                </textarea>

                                </mim-col>
                            </mim-row>
                            <h3>带边框表格</h3>
                            <mim-row style="margin-top: 30px;">
                                <mim-col span="12" style="background: #ffffff;text-align: center">
                                    <div class="basisInput">
                                        <mim-table style="width: 100%" border="true">
                                            <table class="mim-table mim-table-header-wrapper">
                                                <tr>
                                                    <th class="is-leaf" width="100">
                                                        <div class="cell">日期</div>
                                                    </th>
                                                    <th class="is-leaf" width="100">
                                                        <div class="cell">姓名</div>
                                                    </th>
                                                    <th class="is-leaf" width="300">
                                                        <div class="cell">地址</div>
                                                    </th>
                                                </tr>
                                            </table>
                                            <table class="mim-table mim-table-body-wrapper">
                                                <tr>
                                                    <td class="is-leaf" width="100">
                                                        <div class="cell">2019-1-1</div>
                                                    </td>
                                                    <td class="is-leaf" width="100">
                                                        <div class="cell">张三</div>
                                                    </td>
                                                    <td class="is-leaf" width="300">
                                                        <div class="cell">郑州市金水区查查路</div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="is-leaf">
                                                        <div class="cell">2019-1-2</div>
                                                    </td>
                                                    <td class="is-leaf">
                                                        <div class="cell">张麻子</div>
                                                    </td>
                                                    <td class="is-leaf">
                                                        <div class="cell">郑州市郑东新区查查路</div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="is-leaf">
                                                        <div class="cell">2019-1-3</div>
                                                    </td>
                                                    <td class="is-leaf">
                                                        <div class="cell">王二小</div>
                                                    </td>
                                                    <td class="is-leaf">
                                                        <div class="cell">郑州市二七区错错路</div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="is-leaf">
                                                        <div class="cell">2019-1-4</div>
                                                    </td>
                                                    <td class="is-leaf">
                                                        <div class="cell">王五</div>
                                                    </td>
                                                    <td class="is-leaf">
                                                        <div class="cell">郑州市商都路</div>
                                                    </td>
                                                </tr>
                                            </table>
                                        </mim-table>
                                    </div>
                                    <p style="background: #fafafa;text-align: center">默认情况下，Table
                                        组件是不具有竖直方向的边框的，如果需要，可以使用<span style="background: #e5e9f5">border</span>属性，它接受一个Boolean，设置为true即可启用。
                                    </p>
                                    <p style="text-align: center;margin: 20px 0 25px 0">
                                        <mim-button type="primary" id="mimButtonborderShow">显示代码</mim-button>
                                    </p>
                                </mim-col>
                                <mim-col span="12">
                                <textarea id="mimButtonborder" disabled readonly>

                                     <mim-table style="width: 100%" border="true">
                                            <table class="mim-table mim-table-header-wrapper">
                                                <tr>
                                                    <th class="is-leaf" width="100">
                                                        <div class="cell">日期</div>
                                                    </th>
                                                    <th class="is-leaf" width="100">
                                                        <div class="cell">姓名</div>
                                                    </th>
                                                    <th class="is-leaf" width="300">
                                                        <div class="cell">地址</div>
                                                    </th>
                                                </tr>
                                            </table>
                                            <table class="mim-table mim-table-body-wrapper">
                                                <tr>
                                                    <td class="is-leaf" width="100">
                                                        <div class="cell">2019-1-1</div>
                                                    </td>
                                                    <td class="is-leaf" width="100">
                                                        <div class="cell">张三</div>
                                                    </td>
                                                    <td class="is-leaf" width="300">
                                                        <div class="cell">郑州市金水区查查路</div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="is-leaf">
                                                        <div class="cell">2019-1-2</div>
                                                    </td>
                                                    <td class="is-leaf">
                                                        <div class="cell">张麻子</div>
                                                    </td>
                                                    <td class="is-leaf">
                                                        <div class="cell">郑州市郑东新区查查路</div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="is-leaf">
                                                        <div class="cell">2019-1-3</div>
                                                    </td>
                                                    <td class="is-leaf">
                                                        <div class="cell">王二小</div>
                                                    </td>
                                                    <td class="is-leaf">
                                                        <div class="cell">郑州市二七区错错路</div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="is-leaf">
                                                        <div class="cell">2019-1-4</div>
                                                    </td>
                                                    <td class="is-leaf">
                                                        <div class="cell">王五</div>
                                                    </td>
                                                    <td class="is-leaf">
                                                        <div class="cell">郑州市商都路</div>
                                                    </td>
                                                </tr>
                                            </table>
                                     </mim-table>

                                </textarea>

                                </mim-col>
                            </mim-row>
                            <h3 style="display: none">固定表头</h3>
                            <p style="display: none">纵向内容过多时，可选择固定表头。</p>
                            <mim-row style="margin-top: 30px;display: none">
                                <mim-col span="12" style="background: #ffffff;text-align: center">
                                    <div class="basisInput">
                                        <mim-table style="width: 100%" height="150px">
                                            <table class="mim-table mim-table-header-wrapper">
                                                <tr>
                                                    <th class="is-leaf" width="100">
                                                        <div class="cell">日期</div>
                                                    </th>
                                                    <th class="is-leaf" width="100">
                                                        <div class="cell">姓名</div>
                                                    </th>
                                                    <th class="is-leaf" width="300">
                                                        <div class="cell">地址</div>
                                                    </th>
                                                </tr>
                                            </table>
                                            <table class="mim-table mim-table-body-wrapper">
                                                <tr>
                                                    <td class="is-leaf" width="100">
                                                        <div class="cell">2019-1-1</div>
                                                    </td>
                                                    <td class="is-leaf" width="100">
                                                        <div class="cell">张三</div>
                                                    </td>
                                                    <td class="is-leaf" width="300">
                                                        <div class="cell">郑州市金水区查查路</div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="is-leaf">
                                                        <div class="cell">2019-1-2</div>
                                                    </td>
                                                    <td class="is-leaf">
                                                        <div class="cell">张麻子</div>
                                                    </td>
                                                    <td class="is-leaf">
                                                        <div class="cell">郑州市郑东新区查查路</div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="is-leaf">
                                                        <div class="cell">2019-1-3</div>
                                                    </td>
                                                    <td class="is-leaf">
                                                        <div class="cell">王二小</div>
                                                    </td>
                                                    <td class="is-leaf">
                                                        <div class="cell">郑州市二七区错错路</div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="is-leaf">
                                                        <div class="cell">2019-1-4</div>
                                                    </td>
                                                    <td class="is-leaf">
                                                        <div class="cell">王五</div>
                                                    </td>
                                                    <td class="is-leaf">
                                                        <div class="cell">郑州市商都路</div>
                                                    </td>
                                                </tr>
                                            </table>
                                        </mim-table>
                                    </div>
                                    <p style="background: #fafafa;text-align: center">默认情况下，Table
                                        组件是不具有竖直方向的边框的，如果需要，可以使用<span style="background: #e5e9f5">border</span>属性，它接受一个Boolean，设置为true即可启用。
                                    </p>
                                    <p style="text-align: center;margin: 20px 0 25px 0">
                                        <mim-button type="primary" id="mimButtonheightShow">显示代码</mim-button>
                                    </p>
                                </mim-col>
                                <mim-col span="12">
                                    <!--<textarea id="mimButtonborder" disabled readonly>-->

                                    <!--<mim-table style="width: 100%" border="true">-->
                                    <!--<table class="mim-table mim-table-header-wrapper">-->
                                    <!--<tr>-->
                                    <!--<th class="is-leaf" width="100">-->
                                    <!--<div class="cell">日期</div>-->
                                    <!--</th>-->
                                    <!--<th class="is-leaf" width="100">-->
                                    <!--<div class="cell">姓名</div>-->
                                    <!--</th>-->
                                    <!--<th class="is-leaf" width="300">-->
                                    <!--<div class="cell">地址</div>-->
                                    <!--</th>-->
                                    <!--</tr>-->
                                    <!--</table>-->
                                    <!--<table class="mim-table mim-table-body-wrapper">-->
                                    <!--<tr>-->
                                    <!--<td class="is-leaf" width="100">-->
                                    <!--<div class="cell">2019-1-1</div>-->
                                    <!--</td>-->
                                    <!--<td class="is-leaf" width="100">-->
                                    <!--<div class="cell">张三</div>-->
                                    <!--</td>-->
                                    <!--<td class="is-leaf" width="300">-->
                                    <!--<div class="cell">郑州市金水区查查路</div>-->
                                    <!--</td>-->
                                    <!--</tr>-->
                                    <!--<tr>-->
                                    <!--<td class="is-leaf">-->
                                    <!--<div class="cell">2019-1-2</div>-->
                                    <!--</td>-->
                                    <!--<td class="is-leaf">-->
                                    <!--<div class="cell">张麻子</div>-->
                                    <!--</td>-->
                                    <!--<td class="is-leaf">-->
                                    <!--<div class="cell">郑州市郑东新区查查路</div>-->
                                    <!--</td>-->
                                    <!--</tr>-->
                                    <!--<tr>-->
                                    <!--<td class="is-leaf">-->
                                    <!--<div class="cell">2019-1-3</div>-->
                                    <!--</td>-->
                                    <!--<td class="is-leaf">-->
                                    <!--<div class="cell">王二小</div>-->
                                    <!--</td>-->
                                    <!--<td class="is-leaf">-->
                                    <!--<div class="cell">郑州市二七区错错路</div>-->
                                    <!--</td>-->
                                    <!--</tr>-->
                                    <!--<tr>-->
                                    <!--<td class="is-leaf">-->
                                    <!--<div class="cell">2019-1-4</div>-->
                                    <!--</td>-->
                                    <!--<td class="is-leaf">-->
                                    <!--<div class="cell">王五</div>-->
                                    <!--</td>-->
                                    <!--<td class="is-leaf">-->
                                    <!--<div class="cell">郑州市商都路</div>-->
                                    <!--</td>-->
                                    <!--</tr>-->
                                    <!--</table>-->
                                    <!--</mim-table>-->

                                    <!--</textarea>-->

                                </mim-col>
                            </mim-row>
                            <h3>参数说明</h3>
                            <mim-row style="margin-top: 30px;text-align: center;line-height: 36px">
                                <mim-col span="12" style="background: #ffffff;padding: 20px">
                                    <mim-table style="width: 100%;" stripe="true">
                                        <table class="mim-table mim-table-header-wrapper">
                                            <tr>
                                                <th class="is-leaf" width="100">
                                                    <div class="cell">参数</div>
                                                </th>
                                                <th class="is-leaf" width="150">
                                                    <div class="cell">说明</div>
                                                </th>
                                                <th class="is-leaf" width="100">
                                                    <div class="cell">类型</div>
                                                </th>
                                                <th class="is-leaf" width="180">
                                                    <div class="cell">可选值</div>
                                                </th>
                                                <th class="is-leaf" width="100">
                                                    <div class="cell">默认值</div>
                                                </th>
                                            </tr>
                                        </table>
                                        <table class="mim-table mim-table-body-wrapper">
                                            <tr>
                                                <td class="is-leaf" width="100">
                                                    <div class="cell">stripe</div>
                                                </td>
                                                <td class="is-leaf" width="150">
                                                    <div class="cell">是否为斑马纹 table</div>
                                                </td>
                                                <td class="is-leaf" width="100">
                                                    <div class="cell">boolean</div>
                                                </td>
                                                <td class="is-leaf" width="180">
                                                    <div class="cell">——</div>
                                                </td>
                                                <td class="is-leaf" width="100">
                                                    <div class="cell">false</div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="is-leaf" width="100">
                                                    <div class="cell">border</div>
                                                </td>
                                                <td class="is-leaf" width="150">
                                                    <div class="cell">是否带有纵向边框</div>
                                                </td>
                                                <td class="is-leaf" width="100">
                                                    <div class="cell">boolean</div>
                                                </td>
                                                <td class="is-leaf" width="180">
                                                    <div class="cell">——</div>
                                                </td>
                                                <td class="is-leaf" width="100">
                                                    <div class="cell">false</div>
                                                </td>
                                            </tr>
                                            <tr style="display: none">
                                                <td class="is-leaf" width="100">
                                                    <div class="cell">height</div>
                                                </td>
                                                <td class="is-leaf" width="150">
                                                    <div class="cell">定义不包含表头的内容高度</div>
                                                </td>
                                                <td class="is-leaf" width="100">
                                                    <div class="cell">string</div>
                                                </td>
                                                <td class="is-leaf" width="180">
                                                    <div class="cell">——</div>
                                                </td>
                                                <td class="is-leaf" width="100">
                                                    <div class="cell">——</div>
                                                </td>
                                            </tr>
                                        </table>
                                    </mim-table>
                                </mim-col>
                            </mim-row>
                            <div class="upward"><i class="iconfont">&#xe626;</i></div>
                        </div>
                    </mim-main>
                    <mim-footer class="mim-footer">
                        <p class="previousPage"><i class="iconfont">&#xe668;</i><span style="margin-left: 40px"
                                                                                      index="mimLoading">Loading 加载</span>
                        </p>
                        <p class="nextPage"><i class="iconfont">&#xe668;</i><span style="margin-right: 40px"
                                                                                  index="mimSelect">Select 下拉框</span>
                        </p>
                    </mim-footer>
                </mim-container>
            </div>
            <!--Select 下拉框-->
            <div class="mimSelect detailsDiv">
                <mim-container>
                    <mim-header style="text-align: center"><h2>Select 下拉框</h2></mim-header>
                    <mim-main>
                        <div class="vesselDiv">
                            <h3>Select 下拉框</h3>
                            <p>当选项过多时，使用下拉菜单展示并选择内容。</p>
                            <h3>基础用法</h3>
                            <p>适用广泛的基础单选</p>
                            <mim-row style="margin-top: 30px;">
                                <mim-col span="12" style="background: #ffffff;text-align: center">
                                    <div class="basisInput">
                                        <mim-table style="width: 100%">
                                            <mim-select bool="false" class="selects_two"
                                                        style="text-align: left"></mim-select>
                                        </mim-table>
                                    </div>
                                    <p style="background: #fafafa;text-align: center">定义<span
                                            style="background: #e5e9f5">bool</span>属性为false，并使用selectInit（数组）方法初始化样式</p>
                                    <p style="text-align: center;margin: 20px 0 25px 0">
                                        <mim-button type="primary" id="mimSelectShow">显示代码</mim-button>
                                    </p>
                                </mim-col>
                                <mim-col span="12">
                                <textarea id="mimSelect" disabled readonly>
                                    html:

                                     <mim-select bool="false"></mim-select>

                                    js:
                                    var options = [{
                                                    id: '1',
                                                    value: '黄金糕',
                                                }, {
                                                    id: '2',
                                                    value: '双皮奶'
                                                }, {
                                                    id: '3',
                                                    value: '蚵仔煎'
                                                }, {
                                                    id: '4',
                                                    value: '龙须面',
                                                }, {
                                                    id: '5',
                                                    value: '北京烤鸭'
                                                }];

                                    $('元素').selectInit(options);

                                </textarea>

                                </mim-col>
                            </mim-row>
                            <h3>有禁用选项</h3>
                            <mim-row style="margin-top: 30px;">
                                <mim-col span="12" style="background: #ffffff;text-align: center">
                                    <div class="basisInput">
                                        <mim-table style="width: 100%">
                                            <mim-select bool="false" class="selects_four"
                                                        style="text-align: left"></mim-select>
                                        </mim-table>
                                    </div>
                                    <p style="background: #fafafa;text-align: center">在数组中设定<span
                                            style="background: #e5e9f5">disabled</span>值为 true，即可禁用该选项</p>
                                    <p style="text-align: center;margin: 20px 0 25px 0">
                                        <mim-button type="primary" id="mimSelectDisabledShow">显示代码</mim-button>
                                    </p>
                                </mim-col>
                                <mim-col span="12">
                                <textarea id="mimSelectDisabled" disabled readonly>
                                    html:

                                     <mim-select bool="false"></mim-select>

                                    js:
                                    var options = [{
                                                    id: '1',
                                                    value: '黄金糕',
                                                }, {
                                                    id: '2',
                                                    value: '双皮奶'
                                                }, {
                                                    id: '3',
                                                    value: '蚵仔煎'
                                                }, {
                                                    id: '4',
                                                    value: '龙须面',
                                                    disabled:'true'
                                                }, {
                                                    id: '5',
                                                    value: '北京烤鸭'
                                                }];

                                    $('元素').selectInit(options);

                                </textarea>

                                </mim-col>
                            </mim-row>
                            <h3>可清空单选</h3>
                            <p>包含清空按钮，可将选择器清空为初始状态。</p>
                            <mim-row style="margin-top: 30px">
                                <mim-col span="12" style="background: #ffffff;text-align: center">
                                    <div class="basisInput">
                                        <mim-table style="width: 100%" stripe="true">
                                            <mim-select bool="false" class="selects_three" style="text-align: left"
                                                        clearable="true"></mim-select>
                                        </mim-table>
                                    </div>
                                    <p style="background: #fafafa;text-align: center"><span style="background: #e5e9f5">clearable</span>属性true即可将选择器清空。需要注意的是，clearable属性仅适用于单选。。
                                    </p>
                                    <p style="text-align: center;margin: 20px 0 25px 0">
                                        <mim-button type="primary" id="mimSelectClearableShow">显示代码</mim-button>
                                    </p>
                                </mim-col>
                                <mim-col span="12">
                                <textarea id="mimSelectClearable" disabled readonly>
                                    html:

                                     <mim-select bool="false" clearable="true"></mim-select>

                                    js:
                                    var options = [{
                                                    id: '1',
                                                    value: '黄金糕',
                                                }, {
                                                    id: '2',
                                                    value: '双皮奶'
                                                }, {
                                                    id: '3',
                                                    value: '蚵仔煎'
                                                }, {
                                                    id: '4',
                                                    value: '龙须面',
                                                }, {
                                                    id: '5',
                                                    value: '北京烤鸭'
                                                }];

                                    $('元素').selectInit(options);


                                </textarea>

                                </mim-col>
                            </mim-row>

                            <h3>参数说明</h3>
                            <mim-row style="margin-top: 30px;text-align: center;line-height: 36px">
                                <mim-col span="12" style="background: #ffffff;padding: 20px">
                                    <mim-table style="width: 100%;" stripe="true">
                                        <table class="mim-table mim-table-header-wrapper">
                                            <tr>
                                                <th class="is-leaf" width="100">
                                                    <div class="cell">参数</div>
                                                </th>
                                                <th class="is-leaf" width="150">
                                                    <div class="cell">说明</div>
                                                </th>
                                                <th class="is-leaf" width="100">
                                                    <div class="cell">类型</div>
                                                </th>
                                                <th class="is-leaf" width="180">
                                                    <div class="cell">可选值</div>
                                                </th>
                                                <th class="is-leaf" width="100">
                                                    <div class="cell">默认值</div>
                                                </th>
                                            </tr>
                                        </table>
                                        <table class="mim-table mim-table-body-wrapper">
                                            <tr>
                                                <td class="is-leaf" width="100">
                                                    <div class="cell">bool</div>
                                                </td>
                                                <td class="is-leaf" width="150">
                                                    <div class="cell">初始化</div>
                                                </td>
                                                <td class="is-leaf" width="100">
                                                    <div class="cell">string</div>
                                                </td>
                                                <td class="is-leaf" width="180">
                                                    <div class="cell">——</div>
                                                </td>
                                                <td class="is-leaf" width="100">
                                                    <div class="cell">false</div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="is-leaf" width="100">
                                                    <div class="cell">clearable</div>
                                                </td>
                                                <td class="is-leaf" width="150">
                                                    <div class="cell">是否可清除</div>
                                                </td>
                                                <td class="is-leaf" width="100">
                                                    <div class="cell">boolean</div>
                                                </td>
                                                <td class="is-leaf" width="180">
                                                    <div class="cell">——</div>
                                                </td>
                                                <td class="is-leaf" width="100">
                                                    <div class="cell">true</div>
                                                </td>
                                            </tr>
                                        </table>
                                    </mim-table>
                                </mim-col>
                            </mim-row>
                            <div class="upward"><i class="iconfont">&#xe626;</i></div>
                        </div>
                    </mim-main>
                    <mim-footer class="mim-footer">
                        <p class="previousPage"><i class="iconfont">&#xe668;</i><span style="margin-left: 40px"
                                                                                      index="mimTable">Table 表格</span>
                        </p>
                    </mim-footer>
                </mim-container>
            </div>
            <!--js功能 -- Alert提示框-->
            <div class="alertSide detailsDiv">
                <mim-container>
                    <mim-header style="text-align: center"><h2>Alert 提示框</h2></mim-header>
                    <mim-main>
                        <div class="vesselDiv">
                            <h3>Alert提示框</h3>
                            <mim-row style="margin-top: 30px;line-height: 47px; text-align: center">
                                <mim-col span="8" style="background: #ffffff;text-align: left;padding-bottom: 20px">
                                    <div class="basisInput">
                                        <h5 style="text-align: center">效果展示</h5>
                                        <div style="width: 100%;position: relative;">
                                            <div class="mim-prompt_success_box mim-prompt_div">
                                                <p class="mim-prompt_success_p" style="margin-top: 0;width: 100%"><i
                                                        class="iconfont"></i>
                                                    <span>我是一段成功文字</span>
                                                </p>
                                            </div>
                                            <div class="mim-prompt_error_box mim-prompt_div">
                                                <p class="mim-prompt_error_p" style="margin-top: 0;width: 100%"><i
                                                        class="iconfont"></i>
                                                    <span>我是一段失败文字</span>
                                                </p>
                                            </div>
                                            <div class="mim-prompt_warning_box mim-prompt_div">
                                                <p class="mim-prompt_warning_p" style="margin-top: 0;width: 100%"><i
                                                        class="iconfont"></i>
                                                    <span>我是一段警告文字</span>
                                                </p>
                                            </div>
                                            <div class="mim-prompt_info_box mim-prompt_div">
                                                <p class="mim-prompt_info_p" style="margin-top: 0;width: 100%"><i
                                                        class="iconfont"></i>
                                                    <span>我是一段消息文字</span>
                                                </p>
                                            </div>
                                            <div class="mim-prompt_success_box mim-prompt_div">
                                                <p class="mim-prompt_success_p" style="margin-top: 0;width: 100%"><i
                                                        class="iconfont"></i>
                                                    <span>我是带删除的提示框</span>
                                                    <i class="iconfont mim-prompt_i" style="float: right"></i>
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </mim-col>
                                <mim-col span="8" style="background: #ffffff;padding-bottom: 20px">
                                    <div class="basisInput">
                                        <h5 style="text-align: center">调用方式</h5>
                                        <div style="width: 100%;position: relative;text-align: left"
                                             class="basisInput_div">
                                            <p><input readonly value="MIM.prompt('我是一段成功文字','success',3000)">
                                                <mim-button type="text">复制</mim-button>
                                            </p>
                                            <p><input readonly value="MIM.prompt('我是一段失败文字','error',3000)">
                                                <mim-button type="text">复制</mim-button>
                                            </p>
                                            <p><input readonly value="MIM.prompt('我是一段警告文字','warning',3000)">
                                                <mim-button type="text">复制</mim-button>
                                            </p>
                                            <p><input readonly value="MIM.prompt('我是一段消息文字','info',3000)">
                                                <mim-button type="text">复制</mim-button>
                                            </p>
                                            <p><input readonly value="MIM.prompt('我是带删除的提示框','success',3000,true)">
                                                <mim-button type="text">复制</mim-button>
                                            </p>
                                        </div>
                                    </div>
                                </mim-col>
                                <mim-col span="8" style="background: #ffffff;padding-bottom: 20px">
                                    <div class="basisInput">
                                        <h5 style="text-align: center">参数说明</h5>
                                        <div style="width: 100%;position: relative;text-align: left">
                                            <p style="margin-top: 20px">
                                                MIM.prompt(state, type, time, bool)
                                            </p>
                                            <mim-table style="width: 100%" stripe="true" class="mim-table-state">
                                                <table class="mim-table mim-table-header-wrapper">
                                                    <tr>
                                                        <th class="is-leaf" width="60">
                                                            <div class="cell">参数</div>
                                                        </th>
                                                        <th class="is-leaf" width="120">
                                                            <div class="cell">说明</div>
                                                        </th>
                                                        <th class="is-leaf" width="100">
                                                            <div class="cell">类型</div>
                                                        </th>
                                                        <th class="is-leaf" width="180">
                                                            <div class="cell">可选值</div>
                                                        </th>
                                                        <th class="is-leaf" width="70">
                                                            <div class="cell">默认值</div>
                                                        </th>
                                                    </tr>
                                                </table>
                                                <table class="mim-table mim-table-body-wrapper">
                                                    <tr>
                                                        <td class="is-leaf" width="60">
                                                            <div class="cell">state</div>
                                                        </td>
                                                        <td class="is-leaf" width="120">
                                                            <div class="cell">提示的话</div>
                                                        </td>
                                                        <td class="is-leaf" width="100">
                                                            <div class="cell">string</div>
                                                        </td>
                                                        <td class="is-leaf" width="180">
                                                            <div class="cell">——</div>
                                                        </td>
                                                        <td class="is-leaf" width="70">
                                                            <div class="cell">——</div>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td class="is-leaf" width="60">
                                                            <div class="cell">type</div>
                                                        </td>
                                                        <td class="is-leaf" width="120">
                                                            <div class="cell">类型</div>
                                                        </td>
                                                        <td class="is-leaf" width="100">
                                                            <div class="cell">string</div>
                                                        </td>
                                                        <td class="is-leaf" width="180">
                                                            <div class="cell">success/error/warning/info</div>
                                                        </td>
                                                        <td class="is-leaf" width="70">
                                                            <div class="cell">——</div>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td class="is-leaf" width="60">
                                                            <div class="cell">time</div>
                                                        </td>
                                                        <td class="is-leaf" width="120">
                                                            <div class="cell">消失时间（毫秒）</div>
                                                        </td>
                                                        <td class="is-leaf" width="100">
                                                            <div class="cell">number</div>
                                                        </td>
                                                        <td class="is-leaf" width="180">
                                                            <div class="cell">——</div>
                                                        </td>
                                                        <td class="is-leaf" width="70">
                                                            <div class="cell">——</div>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td class="is-leaf" width="60">
                                                            <div class="cell">bool</div>
                                                        </td>
                                                        <td class="is-leaf" width="120">
                                                            <div class="cell">是否可以手动删除</div>
                                                        </td>
                                                        <td class="is-leaf" width="100">
                                                            <div class="cell">boolean</div>
                                                        </td>
                                                        <td class="is-leaf" width="180">
                                                            <div class="cell">true/false</div>
                                                        </td>
                                                        <td class="is-leaf" width="70">
                                                            <div class="cell">false</div>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </mim-table>
                                        </div>
                                    </div>
                                </mim-col>
                            </mim-row>
                            <div class="upward"><i class="iconfont">&#xe626;</i></div>
                        </div>
                    </mim-main>
                    <mim-footer class="mim-footer">
                        <p class="nextPage"><i class="iconfont">&#xe668;</i><span style="margin-right: 40px"
                                                                                  index="confirmPop">Confirm 弹窗</span>
                        </p>
                    </mim-footer>
                </mim-container>
            </div>
            <!--js功能 -- Confirm弹窗-->
            <div class="confirmPop detailsDiv">
                <mim-container>
                    <mim-header style="text-align: center"><h2>Confirm 弹窗</h2></mim-header>
                    <mim-main>
                        <div class="vesselDiv">
                            <h3>Confirm 弹窗</h3>
                            <mim-row style="margin-top: 30px;line-height: 47px; text-align: center">
                                <mim-col span="8"
                                         style="background: #ffffff;text-align: left;padding-bottom: 20px;position: relative">
                                    <div class="basisInput">
                                        <h5 style="text-align: center">效果展示</h5>
                                        <div class="mim-confirm_inner">
                                            <h2 class="mim-confirm_h"><span>提示</span><i class="iconfont"></i></h2>
                                            <p class="mim-confirm_p"><i
                                                    class="iconfont"></i><span>此操作将永久删除该文件, 是否继续?</span></p>
                                            <button class="mim-confirm_button1">确定</button>
                                            <button class="mim-confirm_button2">取消</button>
                                        </div>
                                    </div>
                                </mim-col>
                                <mim-col span="8" style="background: #ffffff;padding-bottom: 20px">
                                    <div class="basisInput">
                                        <h5 style="text-align: center">调用方式</h5>
                                        <div style="width: 100%;position: relative;text-align: left"
                                             class="basisInput_div">
                                            <p><input readonly
                                                      value=" MIM.confirm('此操作将永久删除该文件, 是否继续?', function () {})">
                                                <mim-button type="text">复制</mim-button>
                                            </p>
                                        </div>
                                    </div>
                                </mim-col>
                                <mim-col span="8" style="background: #ffffff;padding-bottom: 20px">
                                    <div class="basisInput">
                                        <h5 style="text-align: center">参数说明</h5>
                                        <div style="width: 100%;position: relative;text-align: left">
                                            <p style="margin-top: 20px">
                                                MIM.confirm(state, successCallback, _confirm, _deselect)
                                            </p>
                                            <mim-table style="width: 100%" stripe="true" class="mim-table-state">
                                                <table class="mim-table mim-table-header-wrapper">
                                                    <tr>
                                                        <th class="is-leaf" width="150">
                                                            <div class="cell">参数</div>
                                                        </th>
                                                        <th class="is-leaf" width="120">
                                                            <div class="cell">说明</div>
                                                        </th>
                                                        <th class="is-leaf" width="100">
                                                            <div class="cell">类型</div>
                                                        </th>
                                                        <th class="is-leaf" width="100">
                                                            <div class="cell">可选值</div>
                                                        </th>
                                                        <th class="is-leaf" width="70">
                                                            <div class="cell">默认值</div>
                                                        </th>
                                                    </tr>
                                                </table>
                                                <table class="mim-table mim-table-body-wrapper">
                                                    <tr>
                                                        <td class="is-leaf" width="150">
                                                            <div class="cell">state</div>
                                                        </td>
                                                        <td class="is-leaf" width="120">
                                                            <div class="cell">提示的话</div>
                                                        </td>
                                                        <td class="is-leaf" width="100">
                                                            <div class="cell">string</div>
                                                        </td>
                                                        <td class="is-leaf" width="100">
                                                            <div class="cell">——</div>
                                                        </td>
                                                        <td class="is-leaf" width="70">
                                                            <div class="cell">——</div>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td class="is-leaf">
                                                            <div class="cell">successCallback</div>
                                                        </td>
                                                        <td class="is-leaf">
                                                            <div class="cell">成功回调函数</div>
                                                        </td>
                                                        <td class="is-leaf">
                                                            <div class="cell">function</div>
                                                        </td>
                                                        <td class="is-leaf">
                                                            <div class="cell">——</div>
                                                        </td>
                                                        <td class="is-leaf">
                                                            <div class="cell">——</div>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td class="is-leaf">
                                                            <div class="cell">_confirm</div>
                                                        </td>
                                                        <td class="is-leaf">
                                                            <div class="cell">确定按钮</div>
                                                        </td>
                                                        <td class="is-leaf">
                                                            <div class="cell">string</div>
                                                        </td>
                                                        <td class="is-leaf">
                                                            <div class="cell">——</div>
                                                        </td>
                                                        <td class="is-leaf">
                                                            <div class="cell">确定</div>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td class="is-leaf">
                                                            <div class="cell">_deselect</div>
                                                        </td>
                                                        <td class="is-leaf">
                                                            <div class="cell">取消按钮</div>
                                                        </td>
                                                        <td class="is-leaf">
                                                            <div class="cell">string</div>
                                                        </td>
                                                        <td class="is-leaf">
                                                            <div class="cell">——</div>
                                                        </td>
                                                        <td class="is-leaf">
                                                            <div class="cell">取消</div>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </mim-table>
                                        </div>
                                    </div>
                                </mim-col>
                            </mim-row>
                            <div class="upward"><i class="iconfont">&#xe626;</i></div>
                        </div>
                    </mim-main>
                    <mim-footer class="mim-footer">
                        <p class="previousPage"><i class="iconfont">&#xe668;</i><span style="margin-left: 40px"
                                                                                      index="alertSide">Alert 提示框</span>
                        </p>
                        <p class="nextPage"><i class="iconfont">&#xe668;</i><span style="margin-right: 40px"
                                                                                  index="verificationDown">验证码倒计时</span>
                        </p>
                    </mim-footer>
                </mim-container>
            </div>
            <!--js功能 -- 验证码倒计时-->
            <div class="verificationDown detailsDiv">
                <mim-container>
                    <mim-header style="text-align: center"><h2>验证码倒计时</h2></mim-header>
                    <mim-main>
                        <div class="vesselDiv">
                            <h3>验证码倒计时</h3>
                            <mim-row style="margin-top: 30px;line-height: 47px; text-align: center">
                                <mim-col span="8"
                                         style="background: #ffffff;text-align: left;padding-bottom: 20px;position: relative">
                                    <div class="basisInput" style="text-align: center">
                                        <h5 style="text-align: center">效果展示</h5>
                                        <mim-button type="primary" class="countdown">获取验证码</mim-button>
                                    </div>
                                </mim-col>
                                <mim-col span="8" style="background: #ffffff;padding-bottom: 20px">
                                    <div class="basisInput">
                                        <h5 style="text-align: center">调用方式</h5>
                                        <div style="width: 100%;position: relative;text-align: left"
                                             class="basisInput_div">
                                            <p><input readonly value="$('元素名').countDown('60', {}, {})">
                                                <mim-button type="text">复制</mim-button>
                                            </p>
                                        </div>

                                    </div>
                                </mim-col>
                                <mim-col span="8" style="background: #ffffff;padding-bottom: 20px">
                                    <div class="basisInput">
                                        <h5 style="text-align: center">参数说明</h5>
                                        <div style="width: 100%;position: relative;text-align: left">
                                            <p style="margin-top: 20px">
                                                MIM.countDown(times, cssInit, cssEnd)
                                            </p>
                                            <mim-table style="width: 100%" stripe="true" class="mim-table-state">
                                                <table class="mim-table mim-table-header-wrapper">
                                                    <tr>
                                                        <th class="is-leaf" width="80">
                                                            <div class="cell">参数</div>
                                                        </th>
                                                        <th class="is-leaf" width="180">
                                                            <div class="cell">说明</div>
                                                        </th>
                                                        <th class="is-leaf" width="100">
                                                            <div class="cell">类型</div>
                                                        </th>
                                                        <th class="is-leaf" width="100">
                                                            <div class="cell">可选值</div>
                                                        </th>
                                                        <th class="is-leaf" width="70">
                                                            <div class="cell">默认值</div>
                                                        </th>
                                                    </tr>
                                                </table>
                                                <table class="mim-table mim-table-body-wrapper">
                                                    <tr>
                                                        <td class="is-leaf" width="80">
                                                            <div class="cell">times</div>
                                                        </td>
                                                        <td class="is-leaf" width="180">
                                                            <div class="cell">倒计时时间（秒）</div>
                                                        </td>
                                                        <td class="is-leaf" width="100">
                                                            <div class="cell">string</div>
                                                        </td>
                                                        <td class="is-leaf" width="100">
                                                            <div class="cell">——</div>
                                                        </td>
                                                        <td class="is-leaf" width="70">
                                                            <div class="cell">——</div>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td class="is-leaf">
                                                            <div class="cell">cssInit</div>
                                                        </td>
                                                        <td class="is-leaf">
                                                            <div class="cell">倒计时结束后按钮样式</div>
                                                        </td>
                                                        <td class="is-leaf">
                                                            <div class="cell">function</div>
                                                        </td>
                                                        <td class="is-leaf">
                                                            <div class="cell">——</div>
                                                        </td>
                                                        <td class="is-leaf">
                                                            <div class="cell">——</div>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td class="is-leaf">
                                                            <div class="cell">cssEnd</div>
                                                        </td>
                                                        <td class="is-leaf">
                                                            <div class="cell">点击后按钮样式</div>
                                                        </td>
                                                        <td class="is-leaf">
                                                            <div class="cell">function</div>
                                                        </td>
                                                        <td class="is-leaf">
                                                            <div class="cell">——</div>
                                                        </td>
                                                        <td class="is-leaf">
                                                            <div class="cell">——</div>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </mim-table>
                                        </div>
                                    </div>
                                </mim-col>
                            </mim-row>
                            <div class="upward"><i class="iconfont">&#xe626;</i></div>
                        </div>
                    </mim-main>
                    <mim-footer class="mim-footer">
                        <p class="previousPage"><i class="iconfont">&#xe668;</i><span style="margin-left: 40px"
                                                                                      index="confirmPop">Confirm 弹窗</span>
                        </p>
                        <p class="nextPage"><i class="iconfont">&#xe668;</i><span style="margin-right: 40px"
                                                                                  index="timeFormatting">时间格式化</span>
                        </p>
                    </mim-footer>
                </mim-container>
            </div>
            <!--js功能 -- 时间格式化-->
            <div class="timeFormatting detailsDiv">
                <mim-container>
                    <mim-header style="text-align: center"><h2>时间格式化</h2></mim-header>
                    <mim-main>
                        <div class="vesselDiv">
                            <h3>时间格式化</h3>
                            <mim-row style="margin-top: 30px;line-height: 47px; text-align: center">
                                <mim-col span="8"
                                         style="background: #ffffff;text-align: left;padding-bottom: 20px;position: relative">
                                    <div class="basisInput" style="text-align: center">
                                        <h5 style="text-align: center">效果展示</h5>
                                        <p class="currentTime"></p>
                                        <p class="currentTimeYear"></p>
                                        <p class="currentTimeDate"></p>
                                    </div>
                                </mim-col>
                                <mim-col span="8" style="background: #ffffff;padding-bottom: 20px">
                                    <div class="basisInput">
                                        <h5 style="text-align: center">调用方式</h5>
                                        <div style="width: 100%;position: relative;text-align: left"
                                             class="basisInput_div">
                                            <p><input readonly value="MIM.timeFilter('时间戳','-', ':')">
                                                <mim-button type="text">复制</mim-button>
                                            </p>
                                            <p><input readonly value="MIM.timeFilter('时间戳','/', false)">
                                                <mim-button type="text">复制</mim-button>
                                            </p>
                                            <p><input readonly value="MIM.timeFilter('时间戳',false, ':')">
                                                <mim-button type="text">复制</mim-button>
                                            </p>
                                        </div>

                                    </div>
                                </mim-col>
                                <mim-col span="8" style="background: #ffffff;padding-bottom: 20px">
                                    <div class="basisInput">
                                        <h5 style="text-align: center">参数说明</h5>
                                        <div style="width: 100%;position: relative;text-align: left">
                                            <p style="margin-top: 20px">
                                                MIM.timeFilter(value, before, later)
                                            </p>
                                            <mim-table style="width: 100%" stripe="true" class="mim-table-state">
                                                <table class="mim-table mim-table-header-wrapper">
                                                    <tr>
                                                        <th class="is-leaf" width="90">
                                                            <div class="cell">参数</div>
                                                        </th>
                                                        <th class="is-leaf" width="250">
                                                            <div class="cell">说明</div>
                                                        </th>
                                                        <th class="is-leaf" width="100">
                                                            <div class="cell">类型</div>
                                                        </th>
                                                        <th class="is-leaf" width="80">
                                                            <div class="cell">可选值</div>
                                                        </th>
                                                        <th class="is-leaf" width="80">
                                                            <div class="cell">默认值</div>
                                                        </th>
                                                    </tr>
                                                </table>
                                                <table class="mim-table mim-table-body-wrapper">
                                                    <tr>
                                                        <td class="is-leaf" width="90">
                                                            <div class="cell">value</div>
                                                        </td>
                                                        <td class="is-leaf" width="250">
                                                            <div class="cell">时间戳（毫秒）</div>
                                                        </td>
                                                        <td class="is-leaf" width="100">
                                                            <div class="cell">number</div>
                                                        </td>
                                                        <td class="is-leaf" width="80">
                                                            <div class="cell">——</div>
                                                        </td>
                                                        <td class="is-leaf" width="80">
                                                            <div class="cell">——</div>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td class="is-leaf">
                                                            <div class="cell">before</div>
                                                        </td>
                                                        <td class="is-leaf">
                                                            <div class="cell">年月日中间间隔样式（若年月日不需要则填false）</div>
                                                        </td>
                                                        <td class="is-leaf">
                                                            <div class="cell">boolean/string</div>
                                                        </td>
                                                        <td class="is-leaf">
                                                            <div class="cell">——</div>
                                                        </td>
                                                        <td class="is-leaf">
                                                            <div class="cell">——</div>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td class="is-leaf">
                                                            <div class="cell">later</div>
                                                        </td>
                                                        <td class="is-leaf">
                                                            <div class="cell">时分秒中间间隔样式（若时分秒不需要则填false）</div>
                                                        </td>
                                                        <td class="is-leaf">
                                                            <div class="cell">boolean/string</div>
                                                        </td>
                                                        <td class="is-leaf">
                                                            <div class="cell">——</div>
                                                        </td>
                                                        <td class="is-leaf">
                                                            <div class="cell">——</div>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </mim-table>
                                        </div>
                                    </div>
                                </mim-col>
                            </mim-row>
                            <div class="upward"><i class="iconfont">&#xe626;</i></div>
                        </div>
                    </mim-main>
                    <mim-footer class="mim-footer">
                        <p class="previousPage"><i class="iconfont">&#xe668;</i><span style="margin-left: 40px"
                                                                                      index="verificationDown">验证码倒计时</span>
                        </p>
                        <p class="nextPage"><i class="iconfont">&#xe668;</i><span style="margin-right: 40px"
                                                                                  index="likeResultStyle">点赞样式</span>
                        </p>
                    </mim-footer>
                </mim-container>
            </div>
            <!--js功能 -- 点赞样式-->
            <div class="likeResultStyle detailsDiv">
                <mim-container>
                    <mim-header style="text-align: center"><h2>点赞样式</h2></mim-header>
                    <mim-main>
                        <div class="vesselDiv">
                            <h3>点赞样式</h3>
                            <mim-row style="margin-top: 30px;line-height: 47px; text-align: center">
                                <mim-col span="8"
                                         style="background: #ffffff;text-align: left;padding-bottom: 20px;position: relative">
                                    <div class="basisInput" style="text-align: center">
                                        <h5 style="text-align: center">效果展示</h5>
                                        <mim-button type="text" class="clickMeLike">点我赞</mim-button>

                                    </div>
                                </mim-col>
                                <mim-col span="8" style="background: #ffffff;padding-bottom: 20px">
                                    <div class="basisInput">
                                        <h5 style="text-align: center">调用方式</h5>
                                        <div style="width: 100%;position: relative;text-align: left"
                                             class="basisInput_div">
                                            <p><input readonly value="$('元素').likeResult('赞+1',{})">
                                                <mim-button type="text">复制</mim-button>
                                            </p>
                                        </div>

                                    </div>
                                </mim-col>
                                <mim-col span="8" style="background: #ffffff;padding-bottom: 20px">
                                    <div class="basisInput">
                                        <h5 style="text-align: center">参数说明</h5>
                                        <div style="width: 100%;position: relative;text-align: left">
                                            <p style="margin-top: 20px">
                                                MIM.likeResult(str, css)
                                            </p>
                                            <mim-table style="width: 100%" stripe="true" class="mim-table-state">
                                                <table class="mim-table mim-table-header-wrapper">
                                                    <tr>
                                                        <th class="is-leaf" width="90">
                                                            <div class="cell">参数</div>
                                                        </th>
                                                        <th class="is-leaf" width="200">
                                                            <div class="cell">说明</div>
                                                        </th>
                                                        <th class="is-leaf" width="100">
                                                            <div class="cell">类型</div>
                                                        </th>
                                                        <th class="is-leaf" width="100">
                                                            <div class="cell">可选值</div>
                                                        </th>
                                                        <th class="is-leaf" width="100">
                                                            <div class="cell">默认值</div>
                                                        </th>
                                                    </tr>
                                                </table>
                                                <table class="mim-table mim-table-body-wrapper">
                                                    <tr>
                                                        <td class="is-leaf" width="90">
                                                            <div class="cell">str</div>
                                                        </td>
                                                        <td class="is-leaf" width="200">
                                                            <div class="cell">提示的话语</div>
                                                        </td>
                                                        <td class="is-leaf" width="100">
                                                            <div class="cell">string</div>
                                                        </td>
                                                        <td class="is-leaf" width="100">
                                                            <div class="cell">——</div>
                                                        </td>
                                                        <td class="is-leaf" width="100">
                                                            <div class="cell">——</div>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td class="is-leaf">
                                                            <div class="cell">css</div>
                                                        </td>
                                                        <td class="is-leaf">
                                                            <div class="cell">展示的样式</div>
                                                        </td>
                                                        <td class="is-leaf">
                                                            <div class="cell">function</div>
                                                        </td>
                                                        <td class="is-leaf">
                                                            <div class="cell">——</div>
                                                        </td>
                                                        <td class="is-leaf">
                                                            <div class="cell">red</div>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </mim-table>
                                        </div>
                                    </div>
                                </mim-col>
                            </mim-row>
                            <div class="upward"><i class="iconfont">&#xe626;</i></div>
                        </div>
                    </mim-main>
                    <mim-footer class="mim-footer">
                        <p class="previousPage"><i class="iconfont">&#xe668;</i><span style="margin-left: 40px"
                                                                                      index="verificationDown">时间格式化</span>
                        </p>
                        <p class="nextPage"><i class="iconfont">&#xe668;</i><span style="margin-right: 40px"
                                                                                  index="customStyle">自定义验证</span></p>
                    </mim-footer>
                </mim-container>
            </div>
            <!--js功能 -- 自定义验证-->
            <div class="customStyle detailsDiv">
                <mim-container>
                    <mim-header style="text-align: center"><h2>自定义验证</h2></mim-header>
                    <mim-main>
                        <div class="vesselDiv">
                            <h3>自定义验证</h3>
                            <mim-row style="margin-top: 30px;line-height: 47px; text-align: center">
                                <mim-col span="8"
                                         style="background: #ffffff;text-align: left;padding-bottom: 20px;position: relative">
                                    <div class="basisInput" style="text-align: center">
                                        <h5 style="text-align: center">效果展示</h5>
                                        <p>
                                            <mim-input type="text" placeholder="手机号验证" class="phoneNumber"></mim-input>
                                            <mim-button style="margin-left: 20px" type="primary" size="small"
                                                        class="clickValidationPhone">点击验证
                                            </mim-button>
                                        </p>
                                        <p>
                                            <mim-input type="text" placeholder="邮箱验证" class="emailNumber"></mim-input>
                                            <mim-button style="margin-left: 20px" type="primary" size="small"
                                                        class="clickValidationEmail">点击验证
                                            </mim-button>
                                        </p>
                                        <p>
                                            <mim-input type="text" placeholder="自定义（身份证）验证"
                                                       class="idCardNumber"></mim-input>
                                            <mim-button style="margin-left: 20px" type="primary" size="small"
                                                        class="clickValidationIdCard">点击验证
                                            </mim-button>
                                        </p>
                                    </div>
                                </mim-col>
                                <mim-col span="8" style="background: #ffffff;padding-bottom: 20px">
                                    <div class="basisInput">
                                        <h5 style="text-align: center">调用方式</h5>
                                        <div style="width: 100%;position: relative;text-align: left"
                                             class="basisInput_div">
                                            <p><input readonly value="MIM.verifyReg('phone','验证的数值',true)">
                                                <mim-button type="text">复制</mim-button>
                                            </p>
                                            <p><input readonly value="MIM.verifyReg('email','验证的数值',false)">
                                                <mim-button type="text">复制</mim-button>
                                            </p>
                                            <p><input readonly value="MIM.verifyReg('(身份证正则表达式)','验证的数值',true)">
                                                <mim-button type="text">复制</mim-button>
                                            </p>
                                        </div>

                                    </div>
                                </mim-col>
                                <mim-col span="8" style="background: #ffffff;padding-bottom: 20px">
                                    <div class="basisInput">
                                        <h5 style="text-align: center">参数说明</h5>
                                        <div style="width: 100%;position: relative;text-align: left">
                                            <p style="margin-top: 20px">
                                                MIM.verifyReg(str, value, bool)
                                            </p>
                                            <mim-table style="width: 100%" stripe="true" class="mim-table-state">
                                                <table class="mim-table mim-table-header-wrapper">
                                                    <tr>
                                                        <th class="is-leaf" width="90">
                                                            <div class="cell">参数</div>
                                                        </th>
                                                        <th class="is-leaf" width="200">
                                                            <div class="cell">说明</div>
                                                        </th>
                                                        <th class="is-leaf" width="100">
                                                            <div class="cell">类型</div>
                                                        </th>
                                                        <th class="is-leaf" width="100">
                                                            <div class="cell">可选值</div>
                                                        </th>
                                                        <th class="is-leaf" width="100">
                                                            <div class="cell">默认值</div>
                                                        </th>
                                                    </tr>
                                                </table>
                                                <table class="mim-table mim-table-body-wrapper">
                                                    <tr>
                                                        <td class="is-leaf" width="90">
                                                            <div class="cell">str</div>
                                                        </td>
                                                        <td class="is-leaf" width="200">
                                                            <div class="cell">验证类型（提供手机号和邮箱）或者验证的正则表达式</div>
                                                        </td>
                                                        <td class="is-leaf" width="100">
                                                            <div class="cell">string/regular</div>
                                                        </td>
                                                        <td class="is-leaf" width="100">
                                                            <div class="cell">phone/email</div>
                                                        </td>
                                                        <td class="is-leaf" width="100">
                                                            <div class="cell">——</div>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td class="is-leaf">
                                                            <div class="cell">value</div>
                                                        </td>
                                                        <td class="is-leaf">
                                                            <div class="cell">需要验证的数值</div>
                                                        </td>
                                                        <td class="is-leaf">
                                                            <div class="cell">number</div>
                                                        </td>
                                                        <td class="is-leaf">
                                                            <div class="cell">——</div>
                                                        </td>
                                                        <td class="is-leaf">
                                                            <div class="cell">——</div>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td class="is-leaf">
                                                            <div class="cell">bool</div>
                                                        </td>
                                                        <td class="is-leaf">
                                                            <div class="cell">是否必填</div>
                                                        </td>
                                                        <td class="is-leaf">
                                                            <div class="cell">boolean</div>
                                                        </td>
                                                        <td class="is-leaf">
                                                            <div class="cell">——</div>
                                                        </td>
                                                        <td class="is-leaf">
                                                            <div class="cell">——</div>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </mim-table>
                                        </div>
                                    </div>
                                </mim-col>
                            </mim-row>
                            <div class="upward"><i class="iconfont">&#xe626;</i></div>
                        </div>
                    </mim-main>
                    <mim-footer class="mim-footer">
                        <p class="previousPage"><i class="iconfont">&#xe668;</i><span style="margin-left: 40px"
                                                                                      index="likeResultStyle">点赞样式</span>
                        </p>
                        <p class="nextPage"><i class="iconfont">&#xe668;</i><span style="margin-right: 40px"
                                                                                  index="returnTop">返回顶部</span></p>
                    </mim-footer>
                </mim-container>
            </div>
            <!--js功能 -- 返回顶部-->
            <div class="returnTop detailsDiv">
                <mim-container>
                    <mim-header style="text-align: center"><h2>返回顶部</h2></mim-header>
                    <mim-main>
                        <div class="vesselDiv">
                            <h3>返回顶部</h3>
                            <mim-row style="margin-top: 30px;line-height: 47px; text-align: center">
                                <mim-col span="8"
                                         style="background: #ffffff;text-align: left;padding-bottom: 20px;position: relative">
                                    <div class="basisInput" style="text-align: center">
                                        <h5 style="text-align: center">效果展示</h5>
                                        <p>暂无</p>
                                    </div>
                                </mim-col>
                                <mim-col span="8" style="background: #ffffff;padding-bottom: 20px">
                                    <div class="basisInput">
                                        <h5 style="text-align: center">调用方式</h5>
                                        <div style="width: 100%;position: relative;text-align: left"
                                             class="basisInput_div">
                                            <p><input readonly value="MIM.goToTop()">
                                                <mim-button type="text">复制</mim-button>
                                            </p>
                                        </div>

                                    </div>
                                </mim-col>
                                <mim-col span="8" style="background: #ffffff;padding-bottom: 20px">
                                    <div class="basisInput">
                                        <h5 style="text-align: center">参数说明</h5>
                                        <div style="width: 100%;position: relative;text-align: left">
                                            <p style="margin-top: 20px">
                                                MIM.goToTop()
                                                <br>
                                                无参数
                                            </p>
                                        </div>
                                    </div>
                                </mim-col>
                            </mim-row>
                            <div class="upward"><i class="iconfont">&#xe626;</i></div>
                        </div>
                    </mim-main>
                    <mim-footer class="mim-footer">
                        <p class="previousPage"><i class="iconfont">&#xe668;</i><span style="margin-left: 40px"
                                                                                      index="customStyle">自定义验证</span>
                        </p>
                        <p class="nextPage"><i class="iconfont">&#xe668;</i><span style="margin-right: 40px"
                                                                                  index="easyDrag">简易拖拽</span></p>
                    </mim-footer>
                </mim-container>
            </div>
            <!--js功能 -- 简易拖拽-->
            <div class="easyDrag detailsDiv">
                <mim-container>
                    <mim-header style="text-align: center"><h2>简易拖拽</h2></mim-header>
                    <mim-main>
                        <div class="vesselDiv">
                            <h3>简单拖拽</h3>
                            <mim-row style="margin-top: 30px;line-height: 47px; text-align: center">
                                <mim-col span="8"
                                         style="background: #ffffff;text-align: left;padding-bottom: 20px;position: relative">
                                    <div class="basisInput" style="text-align: center">
                                        <h5 style="text-align: center">效果展示</h5>
                                        <div id="divDragDiv">
                                        </div>

                                    </div>
                                </mim-col>
                                <mim-col span="8" style="background: #ffffff;padding-bottom: 20px">
                                    <div class="basisInput">
                                        <h5 style="text-align: center">调用方式</h5>
                                        <div style="width: 100%;position: relative;text-align: left"
                                             class="basisInput_div">
                                            <p><input readonly value="$(元素).divDrag()">
                                                <mim-button type="text">复制</mim-button>
                                            </p>
                                        </div>

                                    </div>
                                </mim-col>
                                <mim-col span="8" style="background: #ffffff;padding-bottom: 20px">
                                    <div class="basisInput">
                                        <h5 style="text-align: center">参数说明</h5>
                                        <div style="width: 100%;position: relative;text-align: left">
                                            <p style="margin-top: 20px">
                                                MIM.divDrag()
                                                <br>
                                                暂无(注：元素必须为绝对定位)
                                            </p>
                                        </div>
                                    </div>
                                </mim-col>
                            </mim-row>
                            <div class="upward"><i class="iconfont">&#xe626;</i></div>
                        </div>
                    </mim-main>
                    <mim-footer class="mim-footer">
                        <p class="previousPage"><i class="iconfont">&#xe668;</i><span style="margin-left: 40px"
                                                                                      index="returnTop">返回顶部</span></p>
                        <p class="nextPage"><i class="iconfont">&#xe668;</i><span style="margin-right: 40px"
                                                                                  index="easyAjax">简易ajax封装</span></p>
                    </mim-footer>
                </mim-container>
            </div>
            <!--js功能 -- 简易ajax封装-->
            <div class="easyAjax detailsDiv">
                <mim-container>
                    <mim-header style="text-align: center"><h2>简易AJAX封装</h2></mim-header>
                    <mim-main>
                        <div class="vesselDiv">
                            <h3>简易ajax封装</h3>
                            <mim-row style="margin-top: 30px;line-height: 47px; text-align: center">
                                <mim-col span="8"
                                         style="background: #ffffff;text-align: left;padding-bottom: 20px;position: relative">
                                    <div class="basisInput" style="text-align: center">
                                        <h5 style="text-align: center">效果展示</h5>
                                        暂无
                                    </div>
                                </mim-col>
                                <mim-col span="8" style="background: #ffffff;padding-bottom: 20px">
                                    <div class="basisInput">
                                        <h5 style="text-align: center">调用方式</h5>
                                        <div style="width: 100%;position: relative;text-align: left"
                                             class="basisInput_div">
                                            <p><input readonly
                                                      value="MIM.ajaxUtils('url',{},'true','post','json',{},{})">
                                                <mim-button type="text">复制</mim-button>
                                            </p>
                                        </div>

                                    </div>
                                </mim-col>
                                <mim-col span="8" style="background: #ffffff;padding-bottom: 20px">
                                    <div class="basisInput">
                                        <h5 style="text-align: center">参数说明</h5>
                                        <div style="width: 100%;position: relative;text-align: left">
                                            <p style="margin-top: 20px">
                                                MIM.ajaxUtils(url, data, async, type, dataType, successfn, errorfn)
                                            </p>
                                            <mim-table style="width: 100%" stripe="true" class="mim-table-state">
                                                <table class="mim-table mim-table-header-wrapper">
                                                    <tr>
                                                        <th class="is-leaf" width="150">
                                                            <div class="cell">参数</div>
                                                        </th>
                                                        <th class="is-leaf" width="120">
                                                            <div class="cell">说明</div>
                                                        </th>
                                                        <th class="is-leaf" width="100">
                                                            <div class="cell">类型</div>
                                                        </th>
                                                        <th class="is-leaf" width="100">
                                                            <div class="cell">可选值</div>
                                                        </th>
                                                        <th class="is-leaf" width="100">
                                                            <div class="cell">默认值</div>
                                                        </th>
                                                    </tr>
                                                </table>
                                                <table class="mim-table mim-table-body-wrapper">
                                                    <tr>
                                                        <td class="is-leaf" width="150">
                                                            <div class="cell">url</div>
                                                        </td>
                                                        <td class="is-leaf" width="120">
                                                            <div class="cell">目标路径</div>
                                                        </td>
                                                        <td class="is-leaf" width="100">
                                                            <div class="cell">string</div>
                                                        </td>
                                                        <td class="is-leaf" width="100">
                                                            <div class="cell">phone/email</div>
                                                        </td>
                                                        <td class="is-leaf" width="100">
                                                            <div class="cell">——</div>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td class="is-leaf">
                                                            <div class="cell">data</div>
                                                        </td>
                                                        <td class="is-leaf">
                                                            <div class="cell">需要参数</div>
                                                        </td>
                                                        <td class="is-leaf">
                                                            <div class="cell">obj</div>
                                                        </td>
                                                        <td class="is-leaf">
                                                            <div class="cell">——</div>
                                                        </td>
                                                        <td class="is-leaf">
                                                            <div class="cell">——</div>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td class="is-leaf">
                                                            <div class="cell">async</div>
                                                        </td>
                                                        <td class="is-leaf">
                                                            <div class="cell">是否异步</div>
                                                        </td>
                                                        <td class="is-leaf">
                                                            <div class="cell">boolean</div>
                                                        </td>
                                                        <td class="is-leaf">
                                                            <div class="cell">——</div>
                                                        </td>
                                                        <td class="is-leaf">
                                                            <div class="cell">true</div>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td class="is-leaf">
                                                            <div class="cell">type</div>
                                                        </td>
                                                        <td class="is-leaf">
                                                            <div class="cell">传输类型</div>
                                                        </td>
                                                        <td class="is-leaf">
                                                            <div class="cell">string</div>
                                                        </td>
                                                        <td class="is-leaf">
                                                            <div class="cell">——</div>
                                                        </td>
                                                        <td class="is-leaf">
                                                            <div class="cell">post</div>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td class="is-leaf">
                                                            <div class="cell">dataType</div>
                                                        </td>
                                                        <td class="is-leaf">
                                                            <div class="cell">输出类型</div>
                                                        </td>
                                                        <td class="is-leaf">
                                                            <div class="cell">string</div>
                                                        </td>
                                                        <td class="is-leaf">
                                                            <div class="cell">——</div>
                                                        </td>
                                                        <td class="is-leaf">
                                                            <div class="cell">json</div>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td class="is-leaf">
                                                            <div class="cell">successfn</div>
                                                        </td>
                                                        <td class="is-leaf">
                                                            <div class="cell">成功回调</div>
                                                        </td>
                                                        <td class="is-leaf">
                                                            <div class="cell">function</div>
                                                        </td>
                                                        <td class="is-leaf">
                                                            <div class="cell">——</div>
                                                        </td>
                                                        <td class="is-leaf">
                                                            <div class="cell">——</div>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td class="is-leaf">
                                                            <div class="cell">errorfn</div>
                                                        </td>
                                                        <td class="is-leaf">
                                                            <div class="cell">失败回调</div>
                                                        </td>
                                                        <td class="is-leaf">
                                                            <div class="cell">function</div>
                                                        </td>
                                                        <td class="is-leaf">
                                                            <div class="cell">——</div>
                                                        </td>
                                                        <td class="is-leaf">
                                                            <div class="cell">——</div>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </mim-table>
                                        </div>
                                    </div>
                                </mim-col>
                            </mim-row>
                            <div class="upward"><i class="iconfont">&#xe626;</i></div>
                        </div>
                    </mim-main>
                    <mim-footer class="mim-footer">
                        <p class="previousPage"><i class="iconfont">&#xe668;</i><span style="margin-left: 40px"
                                                                                      index="easyDrag">简易拖拽</span></p>
                    </mim-footer>
                </mim-container>
            </div>
            <!--版本更新日志-->
            <div class="versionUpdating detailsDiv">
                <mim-container>
                    <mim-header style="text-align: center"><h2>版本更新日志</h2></mim-header>
                    <mim-main>
                        <div class="vesselDiv">
                            <h3>版本更新日志</h3>
                            <mim-row>
                                <mim-col span="24" style="text-align: center">
                                    <textarea readonly name="" id="versionUpdating">
                            1.0版本：
                                *使用es6语法仅用于谷歌不适用于ie

                                *成功或失敗的提示框
                                调用方式：prompt（"500","2000",true,"我是一句话"）

                                *时间格式化
                                调用方式：timeFilter（时间戳）timeFilter1（时间戳）timeFilter2（时间戳）timeFilter3（时间戳）timeFilter4（时间戳）

                                *弹窗
                                调用方式：confirm（"500","我是一句话",{成功的回调函数},"确定(可不填)","取消(可不填),{取消的回调函数}"）

                                *验证码倒计时（需要用button）
                                调用方式：countDown("60",{点击按钮前CSS样式},{点击按钮后CSS样式})

                                *点赞
                                调用方式：likeResult("提示的一句话",{提示话语的样式})

                                *图片上传阿里云（请详细阅读）

                            1.1版本：（比较上一版本）

                                *更新所用语法，适用于所有浏览器

                                *新增（验证的封装）
                                调用方式：verification("类型","需要验证的内容",{验证通过的返回},{验证失败的返回})

                                *移除（点赞功能）

                            2.0版本：（比较上一版本）

                                *采用全新写法挂载到CMM上

                                *调用方式完全改变，变为（CMM.方法（参数））

                                *保留 * 1.成功或失敗的提示框  2.弹窗 3.验证码倒计时，其余移除

                            2.1版本：（比较上一版本）

                                *采用全新写法挂载到MIM上

                                *调用方式无较大变化

                                *新增  4.时间格式化
                                调用方式：MIM.timeFilter（时间戳,"（若年月日不需要则填false）",“（若时分不需要则填false）"）

                                5.点赞

                                6.自定义验证（提供手机号和邮箱认证）
                                调用方式：MIM.verifyReg("验证类型（提供手机号和邮箱）或者验证的正则表达式","验证的数值","是否必填")

                                7.点击返回顶部

                                调用方式：MIM.goToTop()调用即可

                            3.0版本（比较上一版本）

                                *采用全新写法样式和js分离

                                *调用方式发生改变支持jq调用方法，支持$$和MIM调用
                                例：$$.prompt('我是一段文字',true,1000);
                                    MIM.prompt('我是一段文字',false,1000);
                                    $('body').prompt('我是一段文字',true,1000);
                                均可以调用，且取消了自主添加宽度
                                （若更改样式，均可在css中更新）

                                *无新增，无删除

                            3.1版本（比较上一版本）

                                *调用方式无过多变化

                                *新增	8.简单的AJAX封装
                                    9.简单的拖拽(注：移动的元素必须为绝对定位)

                            4.0版本（比较上一版本）

                                *调用方式发生变化（3.验证码倒计时5.点赞 9. 拖拽）且调用方式唯一
                                例：   （更新前） $('#zan').click(function () {
                                        $$.likeResult("赞",{
                                                color:"yellow"
                                        });
                                            });

                                        (更新后)$('#zan').likeResult("赞",{
                                            color:"yellow"
                                     });

                            5.0版本（比较上一版本）

                                *提示框改版（成功，失败，警告，消息）
                                调用方式：
                                MIM.prompt('我是一段成功文字','success',3000);
                                MIM.prompt('我是一段失败文字','error',3000);
                                MIM.prompt('我是一段警告文字','warning',3000);
                                MIM.prompt('我是一段消息文字','info',3000);

                                *确认弹窗改版（样式和调用方式）
                                调用方式：
                                 MIM.confirm('此操作将永久删除该文件, 是否继续?',function () {
                                        MIM.prompt('我是一段成功文字','success',3000);
                                    });


                            5.1版本（比较上一版本）
                                *提示框改版（增加手动删除功能）
                                调用方式（不加则不删除，true则开启删除功能）
                                  MIM.prompt('我是一段成功文字','success',3000,true);

                            6.0版本（比较上一版本，开启mim-ui）
                                *按钮样式
                                *布局容器
                                *加载图标

                            6.1版本（比较上一版本）
                                *input样式

                            6.2版本（比较上一版本）
                                *按钮样式功能新增
                                *更改布局容器添加mim-aside
                                *更改布局容器添加mim-row
                                *侧边栏样式
                                *初始化侧边栏样式（function (BackCss, FountCss, hoverBackCss, hoverFountCss)）
                                *BackCss背景色，FountCss文字颜色，hoverBackCss鼠标滑过后背景颜色,hoverFountCss鼠标滑过后文字颜色
                                调用方式：
                                    MIM.mimMenuInit('yellow','blue','#d60000','#ffffff')

                            6.3版本（比较上一版本）
                                *删除初始化侧边栏样式
                                *加载改变为加载页面优化加载
                                *input全新改版（调用方式升级）添加限制字数功能
                                *侧栏优化样式

                            6.4版本（比较上一版本）
                                *新增table表格
                                *新增select下拉框
                                *倒计时优化（解决倒计时结束再次点击不生效问题）
                                *input框优化（解决val取值问题）
                                    </textarea>
                                    <mim-button type="primary" style="margin-top: 50px">
                                        <a href="./image/版本更新说明.txt" download="版本更新说明" style="color: #ffffff;text-decoration: none;display: inline-block;
    width: 100%;">点我下载</a>
                                    </mim-button>
                                </mim-col>
                            </mim-row>

                            <div class="upward"><i class="iconfont">&#xe626;</i></div>
                        </div>
                    </mim-main>
                    <mim-footer class="mim-footer">

                    </mim-footer>
                </mim-container>
            </div>

        </mim-main>
    </mim-aside>
    <mim-loading loading="true" id="loadingClickShowDiv"></mim-loading>
</mim-container>
<script src="./js/jquery-3.3.1.min.js"></script>
<script src="./js/mim-common.js"></script>
<script src="./js/mim-ui.js"></script>
</body>
</html>